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说 出 一 样 事物 的 名 称 ， 往 往 是 了 解 它 的 开始 。 

我 5 光大 的 儿子 和 许多 孩子 一 样 ， 喜 欢 看 天 上 的 云 。 最 近 ， 他 慢 慢 认 识 到 不 同 种 类 的 去 有 着 不 同 
的 名 称 。 天 分 使 然 ， 他 开始 分 门 别 类 地 记忆 这 些 云 一 一 卷 云 、 积 云 、 层 云 、 卷 层 云 、 积 十 云 、 高 
层 云 、 奖 状 云 …… 这 其 中 包括 我 知道 的 所 有 名 称 ， 还 有 一 些 我 不 知道 的 。" 浓 积 云 ”这 个 名 称 我 
之 前 肯定 团 所 未 闻 。 

现在 ， 他 看 着 天 空 ， 能 把 云 的 分 类 说 得 明明 白白 。 不 仅 如 此 ， 他 比 以 前 更 加 注意 其 中 细微 的 差 
别 。 他 学 会 了 通过 观察 云 的 质感 、 颜 色 、 高 度 、 运 动 等 ， 辨 别 云 的 类 型 (当然 ， 不 是 总 能 轻易 做 
到 这 一 点 ， 但 也 没有 被 难 住 )。 他 可 以 预测 哪 族 云 珊 雨 ， 哪 片 云 不 珊 雨 ， 有 时 候 还 挺 准 的 。 


他 以 学 龄 前 儿 香 的 方式 ， 运 用 关于 云 的 知识 分 析出 大 致 的 天 气 变 化 。 他 会 说 :“ 卷 积 云 可 能 意味 
着 天气 转 暧 。 或 者 说 :“ 浓 积 云 也 许 会 变 成 积 雨 云 ! MEWE, R RARER.” 


最 重要 的 是 ， 知 道 这 些 云 的 名 称 使 他 非 稼 快乐 。 似 乎 所 有 的 小 护 子 都 会 为 能 叫 出 他 们 喜欢 之 物 的 名 
字 而 兴 香 不 已 ， 无 论 那 是 云 、 候 龙 、 昆 虫 、 汽 车 、 详 娃娃 ， 还 是 电影 人 物 。 当 然 ， 他 们 的 想象 力 并 
不 受 左 脑 思 维 方式 所 限 ， 尽 管 我 们 成 年 人 认为 这 不 切实 际 一 一 虽然 我 儿子 称 那 些 云 为 “ 积 云 ， 但 
这 并 不 妨碍 他 在 云 里 看 到 宫殿 、 网 子 和 人 花 椰 六 。 

说 说 我 们 成 年 人 吧 。 这 就 涉及 本 书 的 主题 : 通过 识别 界面 设计 模式 并 为 其 命名 ， 我 们 可 以 更 好 地 
“看 ”这 些 界 面 。 由 于 我 们 的 大 脑 更 加 清楚 我 们 想 要 寻找 什么 ， 我们 会 注意 到 更 多 的 细 方 。 当 我 
们 知道 芭 个 界面 模式 会 如 何 表 现时 ， 就 能 预测 所 用 的 软件 将 如 何 运 作 。 然 后 ， 我 们 可 以 用 一 个 贴 
切 的 新 词 加 别人 插 述 我 们 看 到 的 事物 。 


那么 怎么 学 会 这 些 设 计 模 式 呢 ? 


我 儿子 在 认识 云 时 用 到 的 最 好 的 工具 起 图 片 ， 大 量 的 图 片 。 他 在 书 里 和 网 站 上 观察 这 些 “ 样 本 
之 后 ， 学 会 了 分 辨 不 同类 型 的 云 之 间 极 为 细微 的 差异 ， 其 中 一 些 细微 到 很 难 用 言语 描述 。 


IPE, A ATS RED Ea RH RENEK, SRPMS. MRL, R 
能 滔滔 不 绝地 讲解 设计 模式 的 定义 ， 选 择 模 式 的 原则 ， 以 及 它们 之 间 的 差别 。 但 我 知道 ， 任 何 一 个 
只 想 着 设计 界面 的 人 ， 也 就 是 任何 一 个 想 把 设计 模式 当 作 一 部 分 行业 知识 的 人 ， 真 的 不 需要 了 解 所 
有 这 些 内 容 。 对 于 一 种 模式 ， 他 们 只 需要 恰到好处 的 说 明 来 领会 它 ， 之 后 需要 看 到 一 系列 精 挑 细 选 
的 生动 示例 来 巩固 和 吸收 这 些 知识 。 


在 这 本 书 里 ，Theresa Neil 汇集 了 大 量 的 设计 模式 图 片 。 根 据 我 自身 的 经 验 ， 我 可 以 说 这 项 工作 
之 艰巨 难以 想象 。 评 测 这 么 多 的 移动 应 用 、 找 出 其 中 优秀 的 设计 ， 再 把 所 有 这 些 经 过 仔细 编目 的 
屏 和 项 截图 进行 分 类 ， 真 可 谓 不 小 的 壮举 。 

对 移动 界面 设计 师 来 说 ， 这 本 书 吻 足 珍 贯 。 愿 意 的 话 ， 你 可 以 从 头 到 尾 读 一 过 ， 但 更 重要 的 是 ， 
你 可 以 利用 其 中 的 示例 改进 自己 的 设计 。 

判断 这 些 示 例 中 哪些 设计 是 合理 的 ， 然 后 想 一 想 哪 些 最 适合 你 自己 正在 设计 的 应 用 。 

把 这 本 书 当 作 设计 灵感 的 源泉 。 在 与 设计 模式 本 身 无 关 的 方面 ， 比 如 在 图 标 设计 和 色彩 运用 上 ， 
我 也 很 欣赏 这 些 设计 范例 。 

用 这 本 书 来 扩展 你 的 知识 ， 了 解 现 有 应 用 的 工作 原理 ， 而 不 用 费时 费力 地 下 载 并 使 用 所 有 这 些 应 
用 ( 别 饼 了， 是 在 多 种 设备 上 使 用 )。 

看 完 这 本 书 ， 你 甚至 可 能 到 日 党 使 用 的 移动 应 用 中 寻找 你 自己 的 设计 模式 示例 。 实 际 上 ， 我 吏 打 
赌 ， 一 旦 你 熟悉 了 这 些 模式 的 名 称 ， 束 一 定 会 这 样 做 。 在 让 我 儿子 在 野外 指出 儿 次 “ 浓 积 云 ” 之 
后 ， 我 对 它 已 经 非常 熟悉 了 。 天 哪 ， 真 不 知道 以 前 设 有 了 解 这 个 知识 的 时 候 我 是 怎么 活着 的 。 
好 好 享受 阅读 这 本 书 的 乐趣 吧 ! 


Jenifer Tidwell 
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AIRES, BR PARE — PS HEESE TEE EI TA ACU, On A ETE 
起 袖子 着 手工 作 。 本 书 正 适 用 于 这 种 情况 。 


一 方面 ， 自 本 书 第 1 版 于 2011 年 出 版 以 来 ， 移 动 领域 已 经 发 生 了 巨大 的 变化 。 在 第 1 版 中 ,我 
写 到 了 六 个 移动 操作 系统 ， 而 其 中 三 个 一 一 WebOS、 塞 班 (Symbian) 和 黑莓 (BlackBerry)， 在 
当下 的 移动 领域 里 已 经 失去 了 竞争 力 。 


另 一 方面 ， 变 化 又 没有 那么 大 : 本 书 第 工 版 里 写 到 的 70 多 个 设计 模式 ， 大 多 数 仍 在 使 用 ， 只 增 
加 了 届 指 可 数 的 几 个 新 模式 。 然 而 ， 最 新 的 设计 模式 更 多 地 展现 了 “以 移动 为 中 心 ” 的 理念 。 设 
计 师 们 终于 不 再 埋 首 加 面 问 和 网 页 端 隐喻 ， 而 从 根本 上 寻找 移动 界面 的 设计 方案 。 我 希望 这 种 状 
况 持 续 下 去 ， 并 能 加 快 前 进 的 步伐 。 

另 一 个 变化 : 2011 年 ， 我 对 与 操作 系统 无 关 的 设计 也 持 乐 观 态度 ， 这 意味 着 我 们 作为 设计 师 和 
开发 者 可 以 创造 适用 于 多 平台 的 界面 。 实 际 上 ， 事 实 正好 相反 ，iOS、 安 里 和 Windows Phone 各 
目的 设计 规范 越 来 越 正式 ， 特 别 是 导航 方面 。 

所 以 ， 了 解 这 些 操作 系统 的 指导 原则 比 以 往 更 加 重要 ， 而 更 关键 的 是 ， 你 应 该 真正 熟悉 你 的 客户 
目前 时 刻 使 用 的 设备 。 我 强烈 建议 你 至 少 花 六 周 的 时 间 使 用 每 一 个 你 为 之 设计 应 用 的 设备 。 这 
样 ， 当 你 挽 起 袖子 开始 工作 时 ， 你 自己 的 经 验 加 上 本 书 提 供 的 设计 模式 会 让 你 充满 信心 地 设计 出 
优美 易 用 的 应 用 。 


本 书 读者 


本 书面 向 创造 移动 应 用 的 产品 经 理 、 设 计 师 和 开发 者 。 随 着 公司 不 断定 义 和 改 善 他 们 的 移动 战 
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We, FRB ERAT AIS EAE, RPE SRE ASR DL. EPRE Tot ett ^ fn] FLY 
iPhone 应 用 ， 还 十 为 市 面 上 每 一 个 流行 的 操作 系统 做 设计 ， 这 些 设计 模式 帮会 为 第 见 的 设计 挑战 
提供 解决 方案 。 


Safari® Books Online 


ee Safari Books Online (http://www.safaribooksonline.com) 是 应 运 而 生 
Sa fa ri 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 和 商务 
coon Online, 作家 的 专业 作品 。 技 术 专 家 、 软 件 开发 人 员 、Web 设计 师 、 商 务 人 
士 和 创意 专家 守 ， 在 开展 调研 、 解 决 回 题 、 学 习 和 认证 培训 时 ， 都 将 

Safari Books Online 视 作 获取 资料 的 首选 渠道 。 
对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定价 策略 。 
用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media, Prentice Hall Professional, 
Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco 
Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, 
FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology 
以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 去 出 版 之 前 的 书稿 。 要 了 解 Safari Books 

Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 


美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
北京 市 西城 区 西直门 南大 街 2 写成 馈 大 厦 C 座 807 (100035) 
奥 亲 利 技术 咨询 (北京 ) 有 限 公司 


O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 例 代码 
以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://oreil.ly/mobile-design-2e 


对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 
bookquestio ns @ oreilly.com 
要 了 解 更 多 O'Reilly AB. WIRE, AW ASTI, AA T AA : 
http://www.oreilly.com 
我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 
请 关 广 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 
http://www.youtube.com/oreillymedia 
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。 主导 航模 式 全 局 导航 
BE 板式 (Springboard), 7| Æ 3€ HA se (List Menu), 4X # x 
(Dashboard), PRY tere (Gallery), M-RE (Tab Menu), B& 
喻 式 (Skeuomorphic ) 


。 主导 航模 式 是 时 导航 
fixo sts (Side Drawer)、 下 拉 菜 单 式 (Toggle Menu), £X 
式 (Pie Menu) 


。 次 级 导航 模式 
翻 页 式 (Page Swiping)、 深 动 选项 卡 式 (Scrolling Tabs). 、 伸 缩 面板 
式 (Expand/Collapse Panel) 
REKE AB HR ES EA PPE, ELE ERA HE EAN TAE 
用 应 用 。 移动 应 用 市 场 的 评分 系统 提供 了 极 有 价值 的 反馈 信息 ， 这 种 反 
馈 在 网 页 和 桌面 应 用 领域 是 不 存在 的 。 这 些 信息 很 好 地 反映 了 用 户 的 偏 


好 和 期 望 。 

总 体 上 来 说 ， 大 多 数 4 昨 和 5 星 评 价 摘 述 得 并 不 具体 ， 基 本 上 惑 
契 “ 这 个 应 用 太 棒 了 ， 界 面 好 看 ， 用 起 来 顺手 ， 诸 如 此 类 。 但 1 
星 和 2 星 评价 就 很 有 看 头 了 ， 这 样 的 评价 往往 更 为 真实 地 反映 了 
用 户 在 使 用 过 程 中 遇 到 的 问题 。 最 常见 的 抱怨 如 下 : 

。 BAP BR 

。 关键 功能 缺失 (Hoga, tive, JCHXNE S) 

。 界面 设计 混乱 

。 导航 欠 佳 (比如 无 法 返回 ， 找 不 到 要 找 的 东西 ) 


设计 模 却 并 不 能 解决 前 两 个 问题 ， 因 为 这 两 个 问题 都 需要 进行 用 
户 测 试 和 设备 测试 ， 但 青 定 可 以 解决 后 两 个 问题 。 尊 人 循 第 见 的 导 
航 设 计 模 式 可 以 确保 用 户 能 够 在 你 的 应 用 中 找到 并 使 用 其 中 有 价 
值 的 功能 。 


民 好 的 寻 航 与 优秀 的 设计 如 出 一 略 ， 都 征 低 调 内 化 的 。 好 的 导航 
设计 使 得 应 用 软件 向 单 易 用 ， 无 论 是 浏览 图 片 ， 还 征 申 请 购车 贫 
款 ， 用 户 都 可 以 轻松 完成 。 


主导 航模 式 一 一 全 局 导 般 


接 下 来 ,我们 要 介绍 的 第 一 组 模式 用 于 主导 航 ， 比 如 从 一 个 主 类 
别 切 换 到 田 一 个 主 类 别 ， 就 像 保 面 应 用 程序 的 一 级 菜单 。 自 本 书 
第 1 版 出 版 以 来 ， 主 导航 已 经 演化 成 了 两 种 不 同 的 类 型 : 全 局 


(persistent) 导航 和 瞬时 (transient) 导航 。 


全 局 导航 包括 列表 菜单 式 、 选 项 卡 来 单 式 等 侧 单 的 菜单 结构 。 只 
要 打开 有 全 局 导航 的 应 用 ， 主 寻 航 的 各 个 选项 立刻 一 目 了 然 。 


而 瞬时 导航 必须 通过 点 击 或 手势 才 会 清楚 地 显示 出 来 。 由 于 管 能 
手机 的 屏 硕 尺寸 十 分 有 限 ， 这 让 移动 应 用 设计 师 们 不 得 不 思 注 如 
何 “ 打 破 (屏幕 的 ) 框架 *， 于 是 这 种 导航 模式 渐渐 流行 起 来 。 

对 我 来 说 ， 经 典 的 9 后 谜 题 游戏 完美 阐释 了 移动 应 用 导航 设计 模 
式 的 思维 变化 。 试 试看 : 用 4 条 或 更 少 的 直线 将 全 部 9 个 圆 点 连 
接 起 来 ， 要 一 笔 完 成 ， 且 各 条 线 之 间 不 能 重合。 


图 1-1 
o o | 9 hg 
o o © 
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你 会 怎么 做 呢 ? 你 可 能 已 经 发 现 ， 解 决 这 个 这 题 的 唯一 办 法 是 

打破 虚拟 的 边界 。 在 移动 领域 ， 这 一 思想 叫 作 “突破 画布 ”(off- 

canvas ) 。 

图 1-2 


9 点 这 题 的 两 种 解法 


te 


这 种 突破 画布 思维 启发 了 侧 边 抽 导 设计 模式 ， 这 种 模式 成 为 现在 10S 
和 安 早 应 用 上 最 受 欢迎 的 主导 航模 式 .之 一 。 
= 图 1-3 
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图 1-4 
Windows Phone 的 全 景 控件 设计 


图 1-5 
在 Ubuntu 移动 系统 中 ， 可 以 通 
过 滑动 屏幕 边缘 来 调 出 设置 选项 
和 菜单 ， 这 样 可 以 用 整个 屏幕 来 
展示 应 用 内 容 


打破 虚拟 边界 ”的 思想 也 在 很 大 程度 上 影响 了 Windows Phone 8 和 
Ubuntu Touch (一 个 新 的 开源 移动 操作 系统 )。 


| i 


手机 设置 


显示 收藏 应 用 ... 
的 侧 边 栏 


应 用 控件 


设计 师 们 的 设计 思维 从 此 发 生 了 巨大 转变 ， 他 们 开始 将 内 容 层 县 
起 来 ， 而 不 十 将 Ul 统统 放 到 一 个 平面 上 去 。 通 过 3D 图 层面 板 和 
手势 交互 创造 极 佳 用 户 体 验 的 一 个 很 好 的 例子 ， 是 Twitter 早期 的 
iPad 应 用 : 左 侧面 板 是 菜单 栏 ， 中 间 面 板 生 内容 列 表 ， 右 侧面 板 
显示 详细 内 容 。 点 击 中 间 部 分 的 任意 一 条 内 容 时 ， 左 侧 菜单 将 收 
起 ， 同 时 在 右 侧 面板 显示 内 容 预 完 。 扩 击 左 侧 面板 ， 石 侧 和 面板 将 
展开 ， 大 小 占 到 全 屏 的 70% EF. 
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图 1-7 
iOS 版 Trulia 和 安 卓 版 Gowalla 


在 决定 使 用 全 局 导航 还 是 瞬时 导航 时 ， 你 可 以 目 辣 以 下 几 个 同 题 : 


© 你 的 应 用 层次 是 否 “ 局 平 ”? 应 用 的 菜单 分 类 是 同 级 的 还 是 有 
优先 级 的 ? 主要 类 别 是 否 只 有 少数 几 个 ， 即 3 到 5 个 ? 

。 你 的 用 户 是 否 需要 菜单 一 直 处 于 可 见 状态 以 便 快 速 访问 ? 

。 菜单 分 类 有 无 状态 指示 ， 比 如 未 读 邮 件数 ? 


如 末 对 于 以 上 问题 ， 你 的 回答 中 至 少 有 一 个 “是 ”"， 那 么 你 可 能 最 
好 使 用 全 局 导航 。 现 在 就 让 我 们 看 看 这 些 设计 模式 吧 。 


跳板 式 


跳板 式 设计 模式 ， 也 称 为 启动 面板 (Launchpad)， 是 2011 年 最 流 
行 的 导航 模式 。 该 模式 指 的 是 一 个 带 有 菜单 选项 的 登录 界面 ， 而 
菜单 选项 就 是 进入 各 个 应 用 的 起 点 。 

跳板 式 模式 风行 一 时 的 原因 之 一 是 跨 平台 。 当 时 ， 我 们 很 多 人 都 
还 在 摸索 没有 操作 系统 倾向 的 、 有 具有 兼容 性 并 可 重复 利用 的 设计 。 
跳板 式 流 行 起 来 的 另外 一 个 原因 是 ， 这 种 模式 一 屏 最 多 可 以 放置 9 
个 选项 (3x3 格 )。 相 比 1OS 和 安里 系统 标签 栏 上 3 到 5 个 选项 卡 
的 限制 ， 这 种 设计 大 大 增加 了 选项 容量 。 而 且 如 果 再 在 页 面 上 加 
入 翻 页 指示 (底部 的 小 圆 点 )， 那 么 设计 师 还 可 以 提供 更 多 的 菜单 
选项 。 
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video), 2011 4E, ESH Path 采用 。 这 种 模式 比 选项 栏 容纳 的 选 
项 更 多 ， 而 且 可 以 通过 对 这 些 选 项 进行 逻辑 分 组 来 表达 重要 性 或 
优先 级 。 我 们 稍 后 会 在 本 章 进 行 探讨 。 


N > 1: st. VIRGIN T 1:46 PM 


sil. VIRGIN 
Path 3%, Add Friends 
Home 3 Friends 


REM i k n gn 
Path P. 3. 7h | "n. Š Andrew Peek 
Activity 3 A z EN. 只 Andy Sandoz 
Settings M Brendan Lynch 
Sign Out . B Chris Erwin 

EJ Greg Bolton 

由 Jon Lax 

n Jonathan Feindel 

Mike McCue 


Mustafa Al-Qinneh 


hi Travis visited your Path 


然而 ， 跳 板式 设计 模式 并 没有 消亡。 安 摆 、iOS 和 Windows Phone 
均 在 操作 系统 层级 延续 了 这 一 导航 模式 .。 


图 1-8 
iOS 版 Facebook 和 安 卓 版 LinkedIn: 
2011 年 版 中 的 跳板 式 设计 


图 1-9 
iOS 版 Path (2011 年 11 月 ): x 
入 抽 履 式 设计 时 代 


图 1-10 
iOS7, X 9. 44 ( 27 ) fu Windows 
Phone 8 均 在 操作 系统 层面 使 用 
了 跳板 式 导 航模 式 


图 1-11 
iOS 版 LearnVest、Windows Phone 
版 BBC Radio ft = }k Vimeo: 
应 用 上 的 传统 跳板 式 设计 不 死 ， 
而 且 看 上 去 不 错 
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Radio 和 Vimeo 分 别 采 用 了 标准 的 4 宫 格 、6 宫 格 和 9 宫 格 布局 。 
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Orbitz 和 EasyJet RHA [8] AY Ede Ve CP AA Je 
出 了 表单 的 优先 级 。 


， 从 视 完 上 展现 
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Windows Phone 的 磁 贴 模式 (tiles) 将 跳板 式 设 计 发 挥 到 了 极 
致 。 磁 贴 有 动态 的 ， 也 有 静态 的 ， 拥 有 三 种 不 同 的 尺寸 。 动 态 
磁 贴 可 以 显示 未 接 来 电 数 、 下 次 约会 安排 情况 或 古 最 近 联 系 人 
头像 这 样 的 动态 信息 。 要 了 解 更 多 关于 tiles 的 信息 ， 请 阅读 
Windows 设计 指责 : http://msdn.microsoft.com/library/windows/apps/ 
jj662929(vzvs.105).aspx., 


Windows Phone 的 磁 贴 可 以 用 来 做 主 寻 航 ， 或 者 作为 一 个 二 级 导航 
模式 搭配 全 局 控制 来 使 用 。 下 面 三 个 应 用 的 例子 显示 了 Windows 
Phone 磁 贴 的 多 功能 性 。CalendarPro 利用 动态 磁 贴 做 主导 航 设 计 ， 
NBC News 则 设计 了 子 导航 栏 ， 而 Evernote 利用 静态 磁 贴 做 了 子 寻 
航 栏 的 设计 。 


图 1-12 
iOS 版 Orbitz 和 安 卓 版 EasyJet: 
图 标 和 布局 暗示 层次 关系 


图 1-13 
Windows Phone 版 CalendarPro 、 
NBC News 和 Evernote 展示 了 各 
种 磁 贴 的 实现 


图 1-14 
安 卓 版 Evemote Hello: 经 磁 贴 局 
发 的 可 定制 的 跳板 式 设计 
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4c FF iOS 版 的 Evernote Hello 采用 了 基于 磁 贴 模式 的 跳板 式 导 航 
设计 。 用 户 可 以 通过 先 添 加 人 人 物 再 添加 会 议 来 自 定 义 用 户 界面 。 


To get started, 
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TAX 

2010 年 到 2011 年 使 用 过 Palm 手机 的 人 可 能 都 熟悉 卡片 式 导 航 。 
卡片 式 导航 的 原型 是 扑克 牌 ， 模仿 了 扑克 牌 中 和 见 的 切 牌 、 洗 牌 、 
弃 牌 、 翻 牌 等 手法 。 


图 1-15 
2010 年 2) 2011 年 左右 的 Pam 
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阅读 内 容 的 快捷 操作 。 
aren ee | 图 1-16 
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Jelly 和 Potluck 应 用 也 一 脉 相 承 地 采用 了 卡片 式 设 计 作为 导航 和 内 
容 交互 的 主要 模式 。 在 Jelly 里 ， 向 下 请 动 卡片 可 以 将 其 从 屏幕 上 
移 走 ， 这 意味 着 你 不 能 回答 别人 的 问题 ， 与 此 同时 新 的 卡片 取 而 代 
之 。 在 Potluck 中 ， 向 左 滑动 一 合 卡 片 的 最 上 面 一 张 可 以 跳 过 这 个 
故事 ， 癌 右 背 动 会 将 这 张 卡片 移动 到 “保存 的 卡片 组 ”中 。 


图 1-17 
iOS 版 Jelly (http://www.youtube. 
com/watch?v-bCDB TrAhSY ) 
和 Potluck ( http://www.youtube. 
com/watch?v-pcfNFuvvdrA ) 


[小 贴 士 ] 

卡片 式 设计 模式 给 出 了 一 
种 展示 内 容 的 优雅 方案 。 
真正 的 卡片 式 模式 还 应 该 
包括 模拟 切 牌 、 换 牌 、 翻 
牌 等 的 交互 。 
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Answer Forward 


Facebook 和 Pinterest 利用 了 卡片 式 的 视觉 风格 ,但 与 前 面 提 到 的 
例子 相 比 缺少 了 手势 交互 。 这 让 二 者 更 像 卡片 风格 的 列表 元 素 ， 
而 非 真正 的 卡片 式 设计 。 


要 想 了 解 误 用 卡片 式 设计 模式 的 例子 ， 请 参阅 第 11 章 “ 标 新 立 
异 ” 一 节 中 关于 阿拉 斯 加 航空 (Alaska Airlines) 应 用 的 讨论 。 


列表 菜单 式 


列表 菜单 式 中 的 每 一 个 列表 项 都 古 进 入 该 应 用 各 项 功能 的 入 
口 ， 这 一 点 与 跳板 式 类 似 ， 并 且 模 块 之 间 的 切换 需要 返回 到 列 
ZEW. SERA Ke tt Rl Ye (https://developer.apple.com/library/ 
10s/documentation/userexperience/conceptual/mobilehig/Navigation. 
html#//apple_ref/doc/uid/TP40006556-CH53-SW1) 将 其 称 为 层级 时 


航 (hierarchal navigation) : 


在 层级 式 的 应 用 中 ， 用 户 通过 在 每 个 页 面 选择 一 次 进行 导 
航 ， 直 至 到 达 目 标 位 置 。 要 到 达 另 一 个 位 置 ， 用 户 必 须 原 
路 返回 几 步 (或 者 从 头 开 始 )， 然 后 做 出 不 同 的 选择 。“ 设 
置 ” 和 “邮件 ”是 使 用 层级 式 结 构 应 用 的 典范 。 


Kayak, Day One 和 AroundMe 应 用 的 页 面 展 示 出 各 种 不 同 的 列表 


KAFEN 


No Service + 


Flights 
Get the best flight, fast. 


My Trips 


Your trip agenda in one place. 


Flight Tracker 


See if your flight is on time. 


Price Alerts 


Get notified when prices change. 


Cars 
Seek a deal on wheels. 
(p) 


Notifications 


No Service + 4:45 PM 


Hotels 


@) Los Angeles, CA 


N 1 Guest 


k=, 1 Room 
— Today 


< Tomorrow 


Find Hotels 


No Service # 


— Timeline 


Photos 


S Starred 


(01 Years 


1o Settings 


No Service T 4:37 PM 


《 Menu Calendar 


< 2013 > < November > 


2 
3 4 9 
10 7 16 
Ny TTS 20 2] 23 
24 2b v5 27 28 30 


4:35 PM 


29 


FRIDAY 


Create New Entry 
On Friday, November 29 


图 1-18 
iOS }k Kayak: 点 击 “ 首 页 ” 
(Home， 见 右 图 ) 返回 列表 菜单 


图 1-19 
iOS 版 Day One: 列表 菜单 式 的 
主导 航 


图 1-20 


OS 版 A dM TELTE: eoooo T-Mobile * 7:20 PM 1% > NoService = 4:46 PM C7%@> 
1 roundMe: 3X 
2 ay ik ol HA” (Home) 或 @) AROUNDME @) 《AroundMe Restaurants =i 
i x X : ( Menu ) 会 5 好 些 Q Hon tapp for iF non AAEE on iTunes 
itunes pple.cóny/ 
Banks/ATM Mothers Cafe e 
4215 Duval St 0.30 mi 
Y) Bars Austin 
Daily Juice Cafe D 
e Coffee Shops 4500 Duval St 0.30 mi 
Austin 
e Gas Stations 
Julio's Restaurant ©) 
: 4230 Duval St 0.33 mi 
Hospitals Austin 
a) Hotels Dolce Vita Gelato & Espresso D 
4222 Duval St 0.33 mi 
‘ Austin 
Local Guides 


Movie Theatres 


安 齐 中 的 列表 沫 单 式 导航 大 同 小 异 ， 只 是 表达 这 种 横 式 的 层级 结 
构 的 返回 按钮 (Back button) 被 称 为 癌 上 按钮 (Up button), AT 
这 一 点 ， 安 卓 设 计 指 南 中 写 道 : 

向 上 按钮 用 来 在 应 用 的 各 个 页 面 之 间 根 据 层 级 关系 进行 导 

航 。 举 例 来 说 ， 如 果 页 面 A 显示 一 个 条 目 列表 ， 点 击 其 

中 一 项 进入 页 面 B (显示 该 项 的 详情 )， 那 么 页 面 B 应 该 

有 返回 页 面 A 的 向 上 按钮 。 如 果菜 个 页 面 已 经 是 应 用 的 


[小 贴 士 ] i 
, 顶级 页 ( 即 首 页 )， 那 就 不 需要 向 上 按钮 。 
在 设计 层级 结构 的 应 用 导 
航 时 可 以 考虑 列表 菜单 式 “ | eBay 应 用 就 是 这 样 一 个 例子 :向 上 按钮 由 eBay 图 标 前 加 左 箭头 组 


这 种 模式 对 于 列表 项 名 称 成 。 请 广 意 ， 多 数 用 户 的 预期 是 左 箭 头 和 1logo 或 图 标 同时 可 点 。 
较 长 的 菜单 和 列表 项 既 要 
有 名 称 又 要 有 描述 的 菜单 
都 同样 适用 。 实 现 这 种 隆 
航模 式 要 遵循 不 同 操作 系 
统 的 设计 规范 。 


Recent activities 


Watched items ending soon n» 

SS + Outbid B? 
Categories Sell an item Buying reminders 

Leave feedback > 


Selling reminders 


There are currently no selling reminders 


a Reminders 
IX Messages 
XX Saved searches 


仪表 盘 式 
仪表 盘 式 与 跳板 式 和 列表 菜单 式 相似 。 


设计 优秀 的 仪表 盘 让 用 户 一 眼 就 能 看 到 他 最 需要 的 信息 概览 ， 
AN AF Bl S — viii. 


当 你 未 级 深入 设计 各 界面 时 ， 要 提供 能 够 返回 到 仪表 盘 的 导航 ， 这 


而 


一 所 与 列表 来 单 式 和 跳板 坏 的 导航 设计 规则 相同 。 有 关 仪 表盘 式 设 


计 的 更 多 内 容 请 参见 第 6 3€, 


图 1-21 


X HW eBay: 左 箭 头 图 标 是 向 


上 按钮 


图 1 da No Service © 3: 10:49 PM C 7 E> NoService = 10:50 PM C73 => 


iOS 版 Mint: DUE& Sc GE TE y Settings Overview 
KARNAN 


< Overview Spending 


CASH FLOW Hemg 
erm - mers -$672 $9 3 70 
5 


ALERTS 
High Spending 
ADVICE 
You recently donated to a charity. Tur... S 


[小 贴 士 ] 

需要 使 用 关键 指标 或 数 
据 作 为 应 用 入 口 的 时 候 ， 
可 以 采用 仪表 盘 式 。 但 不 
要 载 入 过 多 信息 ， 对 于 要 


SPENDING November 2013 


E Home 
lil Financial © 
E Food & Dining 


lll Health & Fitness 


SPENDING July - December 2013 


展示 的 关键 指标 或 数据 需 na E 
80,000 
经 过 仔细 研究 再 做 决定 。 oe 


[J 14 Transactions 


IN, | 


Refreshing... 


BRS TEX 


陈列 馆 式 设计 可 用 来 哇 现实 时 内 容 ， 比 如 新 闻 、 菜 谱 或 上 照片， 可 
以 采用 网 格 布局 (比如 Recipeas 和 Square Wallet 应 用 ) 或 轮 盘 布 
局 (比如 LinkedIn Pulse 和 BBC News 应 用 )， 还 可 以 采用 幻灯 片 
模式 进行 展示 。 


图 1-23 
iOS 版 Recipeas 和 Square Wallet: 
陈列 馆 式 设计 展示 了 彼此 独立 、 
无 层级 关系 的 内 容 项 


Sweet Ritual Fabricker 


wk 


IRT 


Starbucks BBQ Revolution 


JT ES T Go 


B [BIC DISSE ®) 


LATEST: US film actor Paul Walker who starred in 
Fast & Furious killed in car crash in California,... > 


m 10:53 a 


A BPO. 


All Channels 


TOP STORIES 
= -sr 一 
Australia’s U 


| Pop Radio (o 
Space Junk 


Holy Cow, $200.0 ffi Thanksgivukkah 
Every Single James. | Was A Perfect 
Bond Film on Blu-—- Instagram Storm 


US actor H 
dies in cr4 


Ukraine leader 
'outraged' by clashes 


Troops deployed amid 
Bangkok clashes 


US & CANADA 


; Chile's Endu 
| Rifts: Part III 


: Jes 
[T4 /ei Bill Buford ^ 
on Mario Batali 


PlayStation 4 
Waiting for the 


US actor H 
dies in cr 


A 
US urges N Korea to 
free detainee 


Obama defends 
healthcare 'legacy 


TECHNOLOGY 


Beyond E-Bo 
HarperCollin 
Looks For th 


25 Top) Mashable 
Resources of the 
Week 


Fast and Furious 
Actor Paul Walker 
Dead at 40 


Farcical 
taken off 


US agrees to pay 
$50m after ‘piracy’ 


PlayStation 4 ‘starting 
to sell out 


, RIE BBC News 的 内 容 要 比 LinkedIn Pulse 轻松 ， 


就 选项 卡 式 设计 而 言 ， 安 卓 、iOS 和 Windows Phone 都 有 各 自 特定 的 
术语 和 设计 规范 。 在 此 我 会 把 这 些 规 范 一 一 列 出 来 ， 这 是 因为 ， 即 
使 你 决定 在 设计 迭代 中 抛 开 这 些 规范 ， 理 解 它 们 的 原则 也 非常 重要 。 


iOS 


ERAS LAR IOS 系统 发 布 以 来 ， 就 建议 我 们 把 标签 栏 作为 扁平 
式 应 用 的 导航 (https://developer.apple.conylibrary/ios/documentation/ 


userexperience/conceptual/mobilehig/Navigation.html) : 


在 扁平 式 信息 结构 的 应 用 中 ， 因 为 所 有 的 主要 类 别 都 可 以 
从 主页 面 进 入 ， 所 以 用 户 可 以 直接 从 一 个 主要 类 别 切换 到 
另 一 个 。 音 乐 和 应 用 商店 便 是 运用 腐 平 式 结构 的 范例 。 


有 意思 的 是 ，Facebook 在 采用 侧 边 抽 展 式 导 航 长 达 两 年 之 后 ， 最 近 
又 回归 到 了 选项 卡 式 设计 。 你 可 以 浏览 网 页 http:/tern.ch/1dZFIUF, 
阅读 更 多 关于 Facebook 用 户 测 试 过 程 和 结果 的 信息 。 


图 1-24 
安 卓 版 LinkedIn Pulse 和 BBC 
字幕 式 文本 比 浮 层 式 文 


News: 


A E tit A 


[小 贴 士 ] 

陈列 馆 式 设计 模式 最 适合 
呈现 经 常 更 新 的 、 视 觉 效 

果 直 观 的 无 层级 内 容 。 


图 1-25 
iOS 版 Facebook 的 新 旧版 本 : 在 
千 万 级 用 户 批量 测试 中 ， 选 项 卡 
A CER) 完胜 侧 边 抽 屋 式 ( 左 
图 ) 和 其 他 类 型 的 导航 模式 


图 1-26 
iOS 版 亚马逊 和 沃尔玛 : MAE 
的 应 用 


5:41 PM 


No Service + 


News Feed 


[4 Status © Photo 


Lunch, and then a couple hours on a boat to 
see some whales. The kiddos are excited! 


9, Check In 
中 
Jesper Bylund 


News Feed 


Messages 


Fy, Old Fisherman's Wharf 
MÀ Historical Place 


SB ^ AA r7 CÓ um 


Nearby 


Events 
EN : 
Friends 十 [ adt Like Comment Ææ Share 
OF 
c à 
Close Friends suma 
2 hours ago near Monrovia, CA 


Appropos of nothing. Mom: "Do you still 


Futurniture believe in Santa?" Me: "I was Santa." 
A Family Caroi B © pO B 
ehara News Feed t M Notificat 


iOS 系统 中 的 标签 栏 限制 在 5 个 选项 卡 以 内 。 如 果 应 用 的 主要 类 别 
超过 5 个 ， 那 么 你 可 以 把 “更 多 ” 放 在 最 右 侧 的 第 五 个 选项 卡 上 。 


理解 iOS 中 的 标签 栏 和 工具 栏 之 间 的 区 别 十 分 重要 。 标 签 栏 的 作 
用 是 在 应 用 的 主要 类 别 之 间 进 行 切 换 ， 而 工具 栏 上 显示 的 是 工具 ， 
或 是 指 癌 特定 页 面 的 可 执行 操作 。 


e0000 T-Mobile = 4:09 PM 4:38 PM 


Cart (1 item) 


Duy NO 


~ 


® Beige Rod Pocket Energy 1 
Saving Thermal Insulated 
Blackout Curtain 74 Inc... : 
$99.99 5 Subtotal: $24.00 
Save for later Delete Does not include any applicable shipping charges, 
sales tax or any optional gift charges. 
a. F; Beige Rod Pocket 5 
Ld Thermal Insulated 
Blackout Tie UP Sha ， Gibson Home Stanza 16- 
$21.50 > 2,5 Piece Dinnerware Set 
Save for later Delete os $24.00 
Qty: 1 
Subtotal = $147.49 Color: Red 


SINS SAVEA TOF later 


Nano sim cutter For iPhone 5 
an Simcard Cutter cut Any GSM 
sim into Nano or any Micro Si... 


CQ Sync with online cart 


$3.46 > 
Move to cart Delete 
— | 
& Q WO sx se c Q v9 
Home Search Cart Wish List More Shop List Stores Cart More 


© n e = Eg 


News | Requests Messages  Notificatior 


Cf m => rm 


有 些 应 用 ， 例 如 Instagram 和 RunKeeper， 主 要 针对 进行 单一 操作 
的 用 户 (如 拍摄 照片 或 者 开始 跑步 )， 所 以 他 们 把 行为 召唤 (calls 


to action， 一 项 优先 的 行动 ) 放置 在 标签 栏 上 。 


e T-Mobile 7 3:55 PM 


{nstagrom 


8:38 PM LPS NH. 


T-Mobile ^ 


Fitness is more 
fun together! ` 


e Share progress 
and keep up with E 
friends 


e See how you 
stack up against 
rivals on your 
leaderboard 


314888 likes 

instagram "| use Average Camera Pro for two 
things: photographing water and shooting in 
low light," says photographer @tonycross. 
Tony provided some tips on using Average 


© e» dO 


Start Friends Settings 


如 采 你 要 设计 这 种 标签 栏 ， 就 要 确保 突出 选中 的 选项 卡 。 比 如 ， 
在 Everlapse 和 Tumblr 中 ， 你 就 很 难 分 辨 出 选中 的 是 哪 一 个 选项 
卡 ， 因 为 选中 项 过 于 黯 痰 ， 完 全 被 主要 操作 按钮 的 视觉 效果 所 


掩盖 。 


图 1-27 

标签 栏 ( 左 图 ) 上 有 选项 卡 菜单 ; 
工具 栏 ( 右 图 ) 上 有 可 操作 的 
工具 


图 1-28 
iOS 版 Instagram 和 RunKeeper: 
标签 栏 上 的 行为 召唤 按钮 


图 1-29 
iOS 版 Everlapse 和 Tumblr: AX 
出 的 操作 按钮 掩盖 了 选项 卡 菜单 
的 位 置 指示 


This is your Dashboard. 
四 0 Started 
L] 0 Contributed 


@ 0 Liked 
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KA SA TE S IL PRES Cp HE T — RUP IB] a SR SP He 
X: 固定 选项 卡 (Fixed Tabs), | bz3&7& (Spinners) 和 导航 抽 
Jt (Navigation Drawers)。 以 下 链接 可 以 查看 安里 设计 指南 中 关于 
定 选 项 卡 的 部 分 : http://developer.android.com/design/patterns/app- 
structure.html , 


固定 选项 卡 同 时 显示 多 个 顶级 内 容 视图 ， 可 以 方便 地 在 不 

同 视图 间 进 行 浏览 和 切换 。 固 定 选项 卡 会 一 直 显 示 在 屏幕 

上 ,不 能 像 滚动 选项 卡 ( Scrolling Tabs) 那样 移动 。 固 定 

选项 卡 应 该 始终 允许 用 户 通过 在 内 容 区 向 左 滑 或 向 右 滑 ， 

来 切换 不 同 的 界面 。 

在 以 下 场景 中 使 用 选项 卡 : 

。 预计 你 的 用 户 会 经 第 切换 视图 。 

。 项 级 内 容 视图 有 限 ， 最 多 3 个 。 

。 你 想 让 用 户 清楚 地 知道 有 可 供 选 择 的 视图 ， 
Path 使 用 图 标 作为 固定 选项 卡 ， 而 Quora 把 4 个 文字 选项 卡 塞 进 
了 有 限 的 空间 里 。 设 计 师 往往 错误 地 在 主导 航 中 使 用 滚动 选项 卡 ， 
而 实际 上 应 该 使 用 下 拉 菜 单 或 导航 抽 屠 。 


图 1-30 

Z x JR Quora 把 4 个 文字 选项 卡 
塞 进 了 有 限 的 空间 里 ; 安 卓 版 
Path 使 用 图 标 作为 固定 选项 卡 


Q+ CLEAR NEW 


HOME vof D BROWSE pror f) 


John Labriola voted up your answer to 
User Experience: What are the best online 
user experience courses for beginners? Thu 


上 Eystein Alnaes voted up your answer to , Wimberley 
User Experience: What are the best online Morning, 82°F 
user experience courses for beginners? Tue 


IE Fillipe Massuda is now following you. 20 
Sep 


A. Sandra Antunes thanked you for your UG (9 Sleeping © 
answer to Responsive Web Design: What Je n daa c ei ES a 
are good examples of responsive design in 
complex web application? 17 Sep pcm Added Sameera Rao, Bill Scott, a 


Tom Gibson, Scott Boms and Loren 


Es > : Chen 
f} Cécile Parker is now following you. 17 Sep = 


ey im Joined Path 
f} Cécile Parker voted up your answer to | © On May 7th, 2011 © 
Responsive Web Design: What are good 
examples of responsive design in complex 
web application? 17 Sep 


(Aj Hua Hua is now following you. 17 Sep 


f9 Shoheil Bhowmick is now following you. 16 — 


图 1-31 

[aa] Saving screenshot... 安 a 版 Bump 和 Newegg; 错 ik 
a eae yy 、 s 

《二 地 将 滚动 选项 卡 作为 主导 航 


BROWSE HOME 


Computer Hardware > 
PCs & Laptops 
Electronics 
Cameras 
Software 
Gaming 


Cell Phones 


wv YY 和 Y YY Y | Y 


Office Products 


L4 


图 1-32 


Windows Phone J Netflix: 透视 


控件 实现 应 用 选项 卡 模式 


Windows Phone 
Windows Phone 系统 中 的 选项 卡 菜 单 被 称 为 应 用 选项 卡 (App Tabs), 
你 可 以 通过 水 平 滚动 来 训 览 延伸 至 屏幕 之 外 的 选项 卡 页 面 ， 这 一 模式 
是 通过 透视 控件 (Pivot control) 实现 的 。Windows Phone 设计 指南 中 
(http://msdn.microsoft.com/library/windows/apps/hh202890(v=vs. 105).aspx ) 
EEDOÉ : 
你 可 使 用 透视 控件 (http:/msdnmicrosoft.conylibrary/ 
windows/apps/microsoft.phone.controls.pivot(v=vs.105). 
aspx) 实现 “应 用 选项 卡 ” 模 式 。 该 控件 允许 用 户 在 每 个 
页 面 (MABMAA') 之 间 向 左右 水 平 导 航 。 


NETFLIX 


NETFLIX NETFLIX 


home 


POPULAR ON NETFLIX 


genres Instant queue 


coud Figur AKOMA lali 
TV Shows Guys | 

io L2 921 
Action & Adventure 


Dragon Tattoo Trilogy: 
Extended Edition 


$ 
«1^ TEDTalks: Music 


Anime - * Revolution 


Young & Wild E» | 


Children & Family Movies 
Comedies 


Documentaries 


新 生 模 式 

无 论 古 果 面 器 还 是 移动 器 网 页 ， 邦 有 一 种 新 的 设计 趋势 ， 就 古 在 
用 户 深 动 屏幕 或 同 下 清 动 页 面 内 容 时 把 网 站 头 部 隐 妃 或 是 收缩 
起 来 。 


这 种 折 匡 选项 卡 式 (Retracting Tab) 设计 也 出 现在 了 原生 应 用 中 。 
Pinterest 就 在 用 户 癌 下 清 动 训 览 内 容 时 把 工具 栏 收 起 来 ， 在 向 上 清 
动 时 工具 栏 又 重新 显示 出 来 。iOgS 版 的 Luvocracy 和 Polar 也 用 到 
了 这 种 效 朱 。 


注 1: 透视 项 目 译 法 ， 见 http://msdn.microsoft.com/zh-cn/library/windows/apps/dn 
596104.aspx。( 译 者 注 ) 
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iOS 版 Pinterest: 向 下 滑动 隐 
藏 工具 栏 ， 向 上 滑动 显示 工具 
栏 (http://www.youtube.com/ 
watch?v-joaaJgvTN28 ) 


The Centered School mie on s! PIN 
ibrary: Winter Bulletin jme mater! nity, ph... 


e 
frittatas 


ncos 
"Keep Calm and Bronco 


可 配置 选项 卡 式 (Configurable Tabs) 是 标准 选项 卡 菜单 式 的 另 一 
个 变种 。Frequency 的 设计 模仿 了 所 有 主要 桌面 网 页 浏览 右上 的 标 
签 页 效果 。 添 加 一 个 频道 就 增加 一 个 新 的 选项 卡 。 如 果 屏 幕 上 已 
经 有 大 多 选项 卡 ， 头 部 就 可 以 滚动 。 用 户 只 需 长 按 一 个 选项 卡 ， 
再 拖 动 到 目标 位 置 ， 就 可 以 调整 选项 卡 的 顺序 。 


1024 PM 图 1-34 
- iOS 版 Frequency; 3t + #2 Xx 
aa 和 一 的 可 配置 选项 卡 式 ， 效 果 类 似 
于 网 页 浏览 器 的 标签 页 


Athens 


日 


` . 

arged In High Schog arged In High Schoa 
Classmate's Brutal Murder Two Classmate's Brutal Murder Two 
Years Later Years Later 


原生 应 用 中 的 侧 边栏 也 像 网 页 应 用 中 的 侧 边 栏 一 样 愈 发 流行 起 来 。 
Twitter 在 其 iPad 应 用 中 ， 用 清晰 的 文字 标识 主 界面 的 侧 边栏 导航 。 
Yammer 的 选项 卡 数 量 几 乎 是 Twitter 的 两 倍 ， 但 是 没有 文字 标识 ， 
这 让 导航 用 起 来 有 点 困难 。 


图 1-35 
iPad 版 Twitter 的 选项 卡 文字 标 


识 清 晰 ，iPad 版 Yammer 则 没有 
ra 字 标 识 TA 

图 1-36 
Z Atk Dwell: 肉 之 迷 式 的 侧 边 
栏 导航 
[小 贴 士 ] 


RY PRG EL POR EVE AR 
统 对 选项 卡 菜单 式 的 设计 
规范 。 用 选中 和 未 选中 选 
项 卡 间 的 视 党 差异 明确 指 
示 出 用 户 所 处 的 位 置 。 


Linda Fong likes your message in the On- 
Going Training group. 


Linda Fong and Alissa Chang replied to 
your message in the PR and Media 
Relations group. 


Linda Fong and Alissa Chang like your 
message in the PR and Media Relations 
group. 


Alissa Chang likes your message in the 
Natural Resources Community of Practice > 
group. 


Tid E NOI RT 
因 : 


。 大 多 数 人 狠 古 在 竖 屏 模式 下 使 用 乱 
相当 多 的 横向 空间 。 

。 因为 空间 有 限 ， 所 以 文字 表示 往往 被 去 掉 ， 
可 用 性 。 


BE 被 广泛 用 作乱 能 手机 的 全 局 导航 模式 ， 这 有 两 个 原 


E 和 手机， 而 侧 边 栏 需 要 占用 


这 就 降低 了 应 用 的 


示人 作用 的 例子 。 这 个 应 用 看 上 去 挺 不 错 ， 但 


Dwell 是 一 个 能 起 到 人 警 


你 不 得 不 点 击 每 个 图 标 去 看 看 各 个 主要 类 别 究 竞 是 什么 一 一 
真是 一 个 “ 肉 之 迷 导 航 ” 
webpagesthatsuck.com/mysterymeatnavigation.html) 的 经 典 案例 。 


(mystery meat navigation, http://www. 
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隐喻 式 

隐喻 式 (或 拟 物 式 ) 的 特征 是 用 页 面 模仿 应 用 的 隐喻 对 象 。 尽 管 
现在 视觉 设计 的 审美 倾向 于 扁平 化 设计 ， 但 一 些 应 用 仍然 能 够 通 
过 模仿 真实 世界 的 物体 和 工具 提升 可 用 性 。 


隐喻 式 导航 主要 用 在 游戏 设计 中 ， 比 如 《狙击 手 : 幽灵 战士 2》 
(Sniper: Ghost Warrior 2)， 但 在 一 些 非 游戏 类 型 的 应 用 中 也 能 
Fl), ANE M FABRE Cross DJ、 照 族 应 用 软件 Hipstamatic, LAK 
旅行 类 应 用 软件 FlightBoard 。 


图 1-37 
ZAM IOS 版 《狙击 手 : BR 
战士 2》: 拟 物 风格 在 游戏 导航 
中 十 分 普遍 


图 1-38 
iOS 版 Cross DJ: 拟 物 设计 也 见 
于 一 些 非 游戏 类 的 应 用 


图 1-39 
iOS 版 Hipstamatic: 对 真实 物体 
的 模拟 


Choose Film 


还 有 其 他 一 些 例子 ， 其 中 包括 10S 7 版 乐 顺 备 忘 录 (Awesome 
Note) 和 乎 果 的 报刊 杂志 (Newsstand) 的 新 设计 。 这 两 个 应 用 的 
设计 能 让 人 立刻 识别 出 来 ， 并且 非 常 直观 ， 因 为 我 们 可 以 看 出 它 
是 在 模仿 文件 夹 和 书架 。 
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图 1-40 
iOS 版 Awesome Note 和 Newsstand: 
拟 物 风格 使 得 导航 更 直观 


图 1-41 
iOS 版 FlightBoard: 设计 成 机 场 
里 的 航班 信息 显示 系统 的 模样 


[小 贴 士 ] 

一 定 要 谨慎 地 使 用 隐喻 式 
导航 ， 疝 脚 的 模仿 很 可 能 
造成 第 11 章 中 讨论 的 标 新 
LFF A X, (Novel Notion 


anti-Pattern )。 


图 1-42 
Z S WR RetailMeNot: & EA 
图 标 或 在 屏幕 边缘 轻 滑 ， 以 显示 
侧 边 抽 层 浮 层 ， 浮 层 部 分 覆盖 主 
页 内 容 


3 
Tt 


28 | 


当然 ， 延 伸 到 电子 领域 的 任何 隐喻 部 是 有 限 的 。 比 如 说 ， 早 期 版 本 
HJ iBook 就 一 直 让 人 有 些 迷 惑 ; 一 些 用 户 认 为 电子 书架 的 大 小 暗示 
了 它 能 装 下 的 电子 书 的 数量 ， 然 而 实际 上 并 非 如 此 。 


主导 航模 式 一 一 瞬时 导航 
“瞬时 ”一 词 意 为 短 时 间 停 留 ， 它 精确 地 表达 了 下 面 这 种 导航 菜单 
的 作用 。 这 种 导航 菜单 只 有 在 我 们 需要 的 时 候 才 显示 出 来 ， 在 我 
们 做 出 选择 后 ， 它 会 再 次 销 失 。 这 里 我 们 要 介绍 三 种 瞬时 导航 : 
侧 边 抽 层 式 、 下 拉 菜 单 式 和 转盘 菜单 式 .。 
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击 打开 抽 履 ， 把 原先 的 页 面 内 容 部 分 推出 屏 医 外 ， 例 如 Path, 
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让 用 户 知道 侧 边 抽 屠 存在 的 最 好 办 法 是 什么 ? 


安 卓 设计 指南 (http://developer.android.com/design/patterns/navigation- 
drawer.html) 中 建议 ， 在 用 户 首次 打开 应 用 时 显示 抽 展 打开 的 状 
态 ， 这 样 用 户 就 可 以 看 到 菜单 ， 并 知道 如 何 关 闭 抽 屠 : 
在 首次 局 动 应 用 时 ， 通 过 自动 打开 抽 层 的 方法 向 用 户 介绍 
导航 抽 层 。 这 样 做 可 以 确保 用 户 知 道 导 航 抽 层 的 存在 ， 并 
促使 他 们 探索 抽 层 里 的 内 容 来 了 解 你 的 应 用 结构 。 随 后 几 
次 启动 应 用 时 ， 继 续 显示 抽 居 ， 直 到 用 户主 动 地 手动 打开 
导航 抽 层 为 止 。 一 旦 知道 用 户 已 经 学 会 如 何 打 开 抽 层 ， 你 
就 可 以 将 启动 应 用 时 的 叶 航 抽 居 设置 为 关闭 状态 。 
听 上 去 不 错 ， 对 吧 ? 然而 ,根据 我 对 多 位 客户 所 做 的 用 户 测 试 显 
示 ， 这 项 建议 并 没有 获得 民 好 的 效果 。 于 是 我 推荐 了 一 个 类 似 羔 
谱 大 全 (Allthecooks) 那样 的 设计 一 一 只 在 首次 启动 应 用 时 弹出 
HE 


图 1-43 


iOS 版 Path: 点 击 导 航 图 标 或 水 
FB Ba Mad RAZ, 


KARR SE TUAE H — til 
导航 


图 1-44 
安 卓 版 Allthecooks: 首次 启动 应 
用 时 弹出 抽 居 ， 提 醒 用 户 那 里 有 
导航 菜单 (http://youtu.be/iLlCs- 
gyNaE ) 


图 1-45 
iOS 版 IFTTT: 用 于 配置 和 导航 
的 抽 屋 在 右 侧 


图 1-46 
Windows Phone 版 Facebook Beta: 
两 侧 抽 屠 一 一 左 侧 是 主 菜单 ， 右 
侧 是 快捷 链接 
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最 流行 的 设计 趋势 是 左 侧 抽 居 ,但 也 可 以 设计 在 右 侧 ， 就 像 IThis 
ThenThat (IFTTT) 那样 ， 又 或 是 两 侧 都 有 抽 展 ， 比 如 Windows 
Phone 版 的 Facebook Beta。 


e6000 T-Mobile = 8:29 PM $ C)  eeooo T-Mobile = 8:29 PM $C > 
IFTTT «^7 0m 
o Photos added to a 


*& ; 四 specific album 
upload to Facebook 
by alexander 
. 


© cha 
The Email Channel was 
automatically activated! 

o l 1 


The IFTTT Channel was 
automatically activated! 


Twy Paul Thurrott 


fh 


ae Microsoft 
m 


Need some inspiration for your summer travel 
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可 不 要 像 om finder 和 Frost HAAPE CIEE in. MB 
MH iOS 7 控制 中 心 时 使 用 的 同上 请 动手 势 相 冲突 。 


图 1-47 
atl, MegaFon 全 2:06 PM snl MegaFon => iOS 版 om finder: 屏幕 底 端 的 抽 
find a class om finder 。 > wh oY 
ee FES iOS 7 的 控制 中 心 冲突 
classes near: new york 
Sunday, Apr 28 
4:00 m SADHANA 
with Renee Dryg (Ama 
6:00 Golden Bridge e . f 7 km 
7:00» Bikram Yoga Class 
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—À <> 
图 1-48 
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iOS 版 Frost: 几乎 每 次 我 想 打 开 
菜单 的 时 候 ， 打 开 的 都 是 iOS 的 
控制 中 心 


My Accounts 


Frost Busines $4,959.18 
Business Money $356.33 


View internet Privacy Disclosure. 
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{I 325 Fh HE A TAN AI 4A BR al] EE Se ce D vu HEP. Zillow 房贷 市 场 
(Zillow’s Mortgage Marketplace) 应 用 中 的 抽 敢 显示 了 实时 房屋 抵 
押 贷 款 利 率 曲 线 图 ， 像 LinkedIn 这 样 的 社交 应 用 也 时 笛 在 抽 懂 中 
放 入 个 人 资料 信息 。 


"e 
iOS 版 Zillow 房贷 市 场 : ud 
JE fal b m 


图 1-50 
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级 。 比 如 ， 在 Fancy 中 你 可 以 一 路 点 


击 、 扩 击 册 点击 ， 直 至 


BGA He JI AYR ll 
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右 侧 内 容 也 会 随 之 更 新 。 在 Wish 的 侧 边 抽 居 中 ， 类 别 路 径 只 有 两 
级 ， 选 择 类 别 的 模式 采用 的 是 跳板 式 风 格 。 


Tops 


Oute 


侧 边 


Gmail 的 抽 导 里， 


12:47 PM 


Home 


Shop 


Gifts 


Add 


Same Day Delivery 


Notifications 


Find Friends 


Invite Friends 


Account 


Bottoms 


rwear 


Tii Jit xS PT LAE FH P E RR 
点 击 我 的 名 字 旁 


Brandy 
$505 - 


Buy it now. V 


Discover amazing f 
hand-delivered 


Brandywine Jacket b 
$505 - theYipster + 1 


Men's 


Women's 


Kids 


Pets 


Home 


Gadgets 


Art 


Food 


Media 


Other 


Architecture 


Shirts 


Sweaters 


Sweatshirts 


T-Shirts 


Buy it now. V 


Discover amazing r 
hand-delivered 


Brandywine Jacket b 
$505 - theYipster + 1 


Buy it now. V 
Discover amazing f 
hand-delivered 


Shark keus SH S 
$122 - 


E 


Clothing 


Shoes 


Accessories 


切换 。 
EAA ER LET PFT 
开 一 个 面板 。 在 这 etie opium 或 是 添加 一 个 新 
的 账户 。 


12:47 PM 


Ill 
E 


Buy it now. V 


Discover amazing f 
hand-delivered 


Brandywine Jacket b 
$505 . theYipster + 1: 


Buy it now. V 


Discover amazing f 
hand-delivered 


Shark Long Sleeve S| 
$122 - Amorim + 50 


Æ iOS 版 


图 1-51 
iOS 版 Fancy: 


[小 贴 士 ] 
侧 边 抽 屋 的 设计 可 以 
但 切忌 不 要 让 它 © 


多 层级 的 侧 边 


d 


多 样 


承载 
功能 。 "E LE 


图 1-52 


iOS Jk Wish: 侧 边 抽 屋 的 类 别 
路 径 只 有 两 级 ， 随 后 转换 到 跳 


板式 


图 1-53 


iOS 版 Gmail: J% Æ E hy Fẹ 


板 可 以 切换 或 添加 账户 
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新 兴 模 式 
为 了 啊 应 1OS 7 设计 规范 ，Luvocracy 的 设计 师 一 直 在 试验 一 种 磐 
入 式 侧 边 抽 敢 的 变种 Chttp://uxmag.com/articles/adapting-ui-to-ios-7- 


the-side-menu), 


点 击 导 航 图 标 (dU COLE RIT 图 标 ) 打开 侧 按 抽 民 的 时 候 ， 
BEACHES 仅 把 上 一 级 页 面 加 右 推 开 ， 还 采用 3D 效 采 将 其 推 到 
Ja Tf. 


Searching... > 2:08 PM 7%) EIC 


= CATALOG Hz 
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Luvocracy 的 导航 简洁， 转 场 流畅 。 然 而 ，iOS 版 Airbnb 虽然 具有 
类 似 风 格 的 革 单 ， 却 成 了 一 个 反 模式 。 这 个 新 的 设计 拥有 3 个 高 层 
级 菜单 类 别 : Hír (Travel), AWE (Host) 和 登录 (Log In). “ 旅 
行 ” 的 标题 横 穿 屏 幕 最 上 方 (实际 的 旅行 菜单 选项 与 之 分 离 ， 显 示 
TS. 而 “业主 和 登录 MICE RE ER vid, —7n—7. HM 
击 “ 业 主 ” 或 者 垂直 请 动 会 将 “业主 ”切换 到 上 方 , 而 “旅行 ” 移 
到 底 端 《登录 保持 不 动 )。 再 次 请 动 会 将 其 切换 回去 。 这 个 设计 对 
用 户 来 说 既 不 切实 际 又 效率 低下 。 我 并 不 是 完全 同意 iOS 设计 指南 
(https://developer.apple.com/library/ios/documentation/userexperience/ 
conceptual/mobilehig/Alerts.html) 的 每 一 条 规范 ， 但 是 将 下 文中 的 
滚动 ， 换 成 “请 动  ， 就 指明 了 这 个 案例 的 问题 所 在 : 


图 1-54 

iOS 版 Luvocracy: 点 击 导 航 或 “ 汉 
堡 包 ”， 侧 边 抽 慑 会 将 上 一 级 页 
面 推 到 旁边 和 后面 


图 1-55 
iOS 7 版 Airbnb: 新 型 侧 边 抽 屋 的 
运用 令 人 迷惑 (http:/wwwyoutube. 
com/watch?v=RI1ZwXINhIc ) 


[小 贴 士 ] 

在 采用 侧 边 抽 层 做 导航 前 ， 
先 制 定 出 应 用 的 信息 架构 ， 
并 与 用 户 确认 。 如 果 侧 边 
抽 屋 行 得 通 ， 你 应 该 做 出 
几 种 不 同 的 应 用 原型 进行 
测试 ， 看 看 哪 一 个 设计 效 
采取 好 


图 1-56 
dem Airbnb: 侧 边 抽 尼 导航 十 
清晰 
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不 要 让 用 户 通过 滚动 来 查看 所 有 菜单 选项 。 
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在 本 书 第 1 版 中 ， 我 沿用 了 网 页 设计 的 叫 法 ， 把 这 种 模式 称 为 超 
级 菜单 (Mega Menu) 。 从 那 以 后 ， 
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图 1-57 
iOS 版 American Airlines: 侧 边 
抽 屋 的 分 组 菜单 设计 优美 ,但 上 
级 页 面 应 该 是 不 透明 的 


图 1-58 
Starbucks.com: 采用 下 拉 菜 单 式 
导航 的 响应 式 网 页 设计 
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iOS 版 Pocket 和 Qwiki: 浮 层 式 
下 拉 菜 单 
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安 卓 版 Walmart 和 Windows Phone 
版 Home Depot: if Ex Rare 


与 侧 边 抽 屠 式 一 样 ， 下 拉 菜 单 也 可 以 是 对 入 式 的 ， 将 页 面 内 容 推 
IREZ T: 还 可 以 是 浮 层 式 的 ,菜单 层 浮 在 内 容 页 之 上 ， 如 
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安 蛙 为 这 种 主导 航 提 供 了 一 种 特别 的 控件 一 一 Spinner 控件 。 但 要 
WE, Spinner 应 该 用 于 在 同一 个 类 别 下 的 不 同 视图 间 进 行 导 航 ， 
而 不 是 跳 转 到 完全 不 同 的 类 别 。 


举例 来 说 ，NPR fü NYTimes 这 两 个 都 是 新 闻 类 应 用 ，Spinner 提 
供 了 不 同 的 方式 对 应 用 中 的 海量 新 闻 内 容 进 行 细 分 。 但 是 ， 如 果 
NPR 要 在 这 个 末 单 里 提供 其 他 选项 ， 比 如 音乐 或 天 气 ， 那 么 就 应 
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在 安里 平台 上 ， 如 末 要 通过 下 拉 某 单 实 现 同 一 类 别 下 不 同 视图 同 
的 导航 ， 就 要 使 用 Spinner 控件 。 但 请 记 住 ， 在 iOS 和 Windows 
Phone 平台 上 ， 下 拉 且 单 是 自 定义 控件 ， 这 可 能 需要 更 多 的 时 间 去 
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iOS 版 Ultravisual: 3% & R F 40 


菜单 从 底 端 显示 出 来 


图 1-62 
安 卓 版 NPR fa NYTimes : Spinner 
下 拉 菜 单 用 来 切换 同一 类 别 下 的 
不 同 视图 


图 1-63 
开源 的 第 三 方 安 卓 系统 Paranoid 
中 的 转盘 菜单 式 导 航 (http:/www. 
androidpolice.com/2013/01/22/ 


paranoid-androids-pie-navigation- 


system-is-almost-out-of-the-oven- 


and-it-smells-fantastic/ ) 
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转盘 菜单 式 

转盘 采 单 也 叫 轮 盘 、 环 形 菜 单 或 笃 同 菜单 ， 自 20 世纪 90 年 代 以 
来 一 直 出 现在 困 面 软件 设计 中 ， 近 年 来 更 多 地 出 现在 网 页 应 用 中 。 
在 游戏 设计 中 ， 这 种 模式 也 非常 受 欢迎 。 所 以 ， 当 上 和 手 试 玩 PIE 
(开源 的 第 三 方 安 卓 系统 Paranoid 中 的 转盘 菜单 ) 时 ， 我 非常 兴 
盏 ， 并 且 对 其 操作 之 流畅 感到 非 第 惊讶 。 
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如 果 安 掉 系 统 把 转盘 菜单 设 为 标准 控件 之 一 的 话 ， 那 么 我 不 认为 
它 适 合用 来 作 应 用 的 主导 航 ， 因 为 这 会 在 操作 系统 和 应 用 之 间 造 
成 太 多 的 冲突 。 


看 看 其 他 操作 系统 吧 ， 我 发 现 只 有 届 指 可 数 的 儿 个 应 用 尝试 采用 
了 这 种 模式 作为 主导 航 。 我 找到 的 这 些 例子 并 不 那么 理想 。 比 如 


说 ， 使 用 PortalWebBrowser 的 多 层 轮 盘 导 航 时 ， 用 户 需 要 具备 强 
大 的 心理 能 力 以 及 外 科 医 生 般 精准 的 操作 手法 。 
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Paranoid 7E © A Ze rH Hy PIE 5E PortalWebBrowser 中 的 转盘 菜单 在 
设计 上 的 主要 区 别 在 于 ， 后 者 的 层级 大 多 ， 而 且 触 摸 对 象 太 视 珍 
了 了。 点击、 长 按 ， 然 后 请 过 轮 盘 ， 移 至 或 大 或 小 的 栋 形 按钮 ， 这 
个 手势 既 不 简单 也 不 自然 。 不 过 ， 在 选择 操作 方面 ， 转 盘 菜 单 式 
是 有 一 些 优秀 示例 的 ， 请 参看 第 5 草 。 


次 级 导 般 模式 


如 采 只 讲 主 导航 的 话 ， 本 章 内 容 会 不 够 完整 ， 所 以 我 将 次 级 导航 
也 放 到 了 本 革 。 我 所 说 的 次 级 导航 ， 指 的 是 在 一 个 选中 模块 内 活 
动 的 导航 。 比 如 说 ， 星 巴克 采用 选项 卡 菜 单 式 作为 主导 航 ， 而 首 
页 上 使 用 的 古 跳 板式 次 级 导航 。 与 之 类 似 ，Brit & Co. 也 使 用 选项 
卡 菜 单 式 作 主导 航 ( 即 一 个 Windows 透视 控件 ) ， 在 浏览 模块 内 则 
采用 跳板 式 作为 次 级 导航 。 


图 1-64 

iOS 版 PortalWebBrowser: 使 用 
f Ed GR m B EE 
精确 的 触摸 


[小 贴 士 ] 
这 个 模式 可 能 是 所 有 主导 
航模 式 中 最 不 常用 的 ， 在 
设计 任何 有 多 个 层级 的 菜 
单 时 应 该 避免 采用 。 如 果 
你 的 应 用 信息 结构 局 平 化 ， 
那么 可 以 考虑 选用 选项 卡 
式 菜 单 ， 这 对 所 有 用 户 来 
说 都 更 为 熟悉 。 
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所 有 主导 航模 式 都 同样 可 以 用 作 次 级 导航 模式 。 选 项 卡 式 导航 里 
包含 选项 卡 、 列 表 或 仪表 盘 ， 跳 板式 导航 里 包含 陈列 馆 式 等 ， 都 
Ta ti 
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WER, KAS te Rl te A 


m. VF CZ 全 2:16 AM @ @ 100% T-Mobile 会 6:44 PM 


NATIONAL 
GEOGRAPHIC 


Home 


Itineraries 


News 


Editors’ Pick 


Badlands Big Bend 


0 


PARK 
GUIDES 


> 


Bryce Canyon Canyonlands 


e000 T-Mobile = 11:04 AM 了 NN) = e@000 T-Mobile = 11:03 AM 了 => 


ES] Send Feedback © Hep = BILLGUARD af. 


Discover 
DISCOVER DISC@VER 
SG Balance: $11,670 e Discover 


a Add another card 


$3,883 


Ed Upgrade 
Gi) 


m 


g Tell a Friend 


BA Rate Our App 


PRIORITY RECENT 
te. Settings Panera Bread, Paner... 
a Privacy & Terms x [e] 
[> Log Out RECURRING ALL 


还 有 一 些 模式 也 可 以 用 作 次 级 导航 ， 其 中 有 翻 页 式 、 深 动 选 项 卡 
式 和 伸缩 面板 式 .。 


这 种 模式 可 以 通过 背 动 手势 快速 导航 内 容 页 。 表 现 这 种 导航 模 
式 的 最 常见 方式 是 利用 页 面 指示 器 (Page Indicator, iOS 里 对 一 
行 小 圆 点 的 叫 法 )。 卡 片 隐喻 也 同样 适用 于 页 面 ， 比 如 Ness 和 
Foodspotting 中 的 设计 。 在 这 些 例子 中 ， 部 分 可 见 的 背景 卡片 或 页 
面 用 以 引导 用 户 去 请 动 屏 幕 。 
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图 1-67 
iOS 版 BillGuard: 主导 航 是 侧 边 
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图 1-68 
iOS 版 Audible: 主导 航 是 选项 
卡 式 ， 次 导航 是 翻 页 式 。 注 意 页 
面 指示 器 
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许多 安 摆 应 用 都 提供 了 类 似 的 翻 页 体验 。 在 谷歌 地 图 (Google 
Maps) 中 ， 你 可 以 请 动 搜索 结 东 列表 。 初 次 使 用 时 ， 会 显示 一 个 
天 于 这 种 请 动 翻 页 操作 的 提示 。 


Ark Mail 与 Gmail 类似， 都 用 翻 页 式 作 为 电子 邮件 消息 的 快速 导 
航 。 一 罕 行 页 脚 显 示 消 息 的 总 数 和 当前 消息 数 ， 并 在 底 问 两 侧 分 
别 标示 出 新 旧 邮 件 ， 以 此 表明 水 平 请 动 可 以 看 到 其 他 邮件 。 
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安 章 版 谷歌 地 图 和 Ark Mail 
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News360 是 翻 页 式 的 一 个 反 模 式 案例 ， 因 为 它 缺 乏 功 能 指示 。 如 
果 它 像 HuffPost 那样 ， 在 顶部 加 入 页 面 指示 器 小 圆 点 标识 而 不 是 
采用 垂直 访 动 条 ， 便 会 立刻 让 人 明白 ， 使 用 水 平 请 动手 势 便 可 以 
查看 下 一 篇 新 闻 。 


[小 贴 士 ] 

运用 翻 页 式 时 要 利用 移动 
的 手势 控制 ， 不 要 依赖 像 
下 一 步 按钮 或 标签 页 这 类 


| | 桌面 端 模式 。 但 要 注意 提 

供 视 觉 指 示 ， 让 用 户 知 道 
可 以 使 用 滑动 手势， 
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滚动 选项 卡 式 

安 齐 设计 指南 (http://developer.android.com/design/building-blocks/ 
tabs.html) 把 这 些 次 级 导航 控件 称 为 滚动 选项 卡 式 ， 所 以 我 延续 它 
的 叫 法 。 在 某 一 个 模块 中 显示 多 种 类 别 或 视图 时 ， 这 种 模式 非 芝 
有 有 用。 滚动 选项 卡 一 般 比 标准 的 标 俭 栏 要 第 ， 因 为 它们 没有 必要 
作为 触摸 对 家 。 更 典型 的 是 将 它们 用 作 水 平 请 动 指示 。 


在 Google Play 应 用 中 ， 在 导航 抽 屋 中 选择 了 一 个 菜单 项 (比如 电 
影 和 电视 剧 ) 之 后 ， 滚 动 选 项 卡 用 来 对 结 来 进行 般 选 。Songza 和 
TuneIn 的 例子 展示 了 这 种 模式 的 其 他 应 用 。 
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如 采 你 要 使 用 这 种 模式 ， 请 确 你 你 的 界面 设计 请 晰 地 指示 出 了 选 
中 的 标签 项 。 


JT E Sez SE 菜单 式 


iot RN AUR XU) 能 使 用 户 在 同一 页 面 上 
奋 看 到 更 多 的 信息 。 这 种 模式 比 跳 转 到 另 一 页 面 再 跳 回 去 更 高 效 。 
注意 Elevatr, Flava 和 安里 Play Store 这 些 人 例子， 它们 全 都 使 用 了 
第 见 的 图 标 去 指示 面板 的 展开 或 收 起 状态 。 


No Service 3 


| 
Make Moves | Share Done 


Design trends 


Created: Dec 23, 2013 | Edited: sec ago 


The Idea 
The Market 


The Product 


Business Model 


Execution 


The Idea 一 - 


Way to aggregate current mobile 
patterns 


The Market 


The Product 


Business Model 


Execution 


T-Mobile + 


Back FAQs 


Can | back up my Flava data? 


Want to learn more about Flava’s 
storage space (Cloud) 


How can | increase my cloud space? 


How can | use weather, look, theme 
icon tags? 


What is the Slideshow on the top of 
timeline page? 


What is Replay feature? 


| want to use Flava on other device 
such as desk PC and laptop. 


How can | view it by month/year? 


Can | search saved page? 


Can I change language of Flava App? 


Camatimac carrchina far meia 


Back FAQs 


How can | use weather, look, theme 
icon tags? 


What is the Slideshow on the top of 
timeline page? 


What is Replay feature? 


Use landscape mode for iPhone and execute 
Replay feature on extension menu for Android 
phone for Slideshow with fascinated music. 
Organize by icon tags, text tags, or by 
month/year on the timeline, then you can 
replay by tags or entire timeline. 

Sounds provided by the best studio, 
‘Supasounds’, or songs on your library will be 
played randomly. Better replay feature will be 
offered to you through upcoming updates. 
Want to enjoy your past memories with your 
beloved one or by yourself? Do 'Replay'. 
Flava can help you out anytime, anywhere! 


I want to use Flava on other device 
such as desk PC and laptop. 


How can view it by month/year? 


图 1-74 

iOS 版 Elevatr: 当面 板 展开 时 “+” 
号 变 成 “一 ”号 ， 而 且 标 题 变 成 
反 色 


图 1-75 
iOS 版 Flava: 向 下 的 箭头 指示 
面板 展开 
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4 # Play Store: “IMEK” H 
板 中 的 展开 / 收 起 
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要 使 用 常见 的 图 标 来 指示 
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Introducing Instagram Direct! 


We're excited to introduce Instagram Direct, a new way 
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Over 150 million users love Instagram! 


Its a simple way to capture and share the world's 
moments on your Android. Customize your photos 


Instagram 
INSTAGRAM 
UPDATE 
UNINSTALL 
Rate & review Kk kk & 


What's new 


Introducing Instagram Direct! 


We're excited to introduce Instagram Direct, a new way 
to send photo and video messages to your friends. 


Now you'll see a new icon in the top right corner of 
your home feed. Tap it to see photos and videos that 
people have sent directly to you. 


To send your own photos or videos, choose Direct 
instead of Followers once you've edited your post. 
When you're done editing, just choose the people you 
want to share with. 


NA = : 
e» 一 ' Ne 
ubtoral $0.0 b. J 
mie AS aN N N 
gp $^ Tea $000 / " S KO 
Nan? ; t 2 N 2 
Use Za aa QA Óo, 
eos" < - he by 4 
= wo Pay + method a 
fo Pos ymen: e 
exit xad 
es 
z 
A 
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。 常见 表单 模式 
登录 表单 (Sign In)、 注 册 表 单 (Registration)、 个 性 化 注册 表单 
(Registration with Persona lization)、 结 账 表 单 (Checkout)、 计 算 
表单 (Calculator), WAKRA (Search Form), #4279832 "2 (Multi- 
Step ) 、 长 表单 (Long Form) 


多 数 网 页 应 用 都 大 量 依 赖 表单 实现 数据 输入 和 配置 。 尽 管 我 们 对 高 效 的 
表单 设计 已 有 一 些 研 究 成 末 和 设计 策略 ， 但 网 络 上 精 糕 的 表单 仍然 随处 
可 见 。 设 置 在 线 账号 、 购 买 商品 、 提 交 申 请 、 填 写 调 查 问 卷 等 ， 倍 直 让 
我 们 筋疲力尽 。 
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Windows Phone 版 American 
Airlines 机 票 预订 : 差劲 的 表单 


设计 


图 2-1 


glish 


» v ay 
; Early Morning 4 
American Airlines SR 


Find Flights Step 1 of 6 Return Date 
ound- si 


Month|v] Day 回 
Early Morning|v] 


Passengers: 


To: 1 Adult (16-64) 


(Maximum of 6 passengers per reservation) 


Information Regarding Lap Infants 
Show Results By: 


(e) Price Q Schedule 


Cabin Preference: 
Economy - With Restrictions v] 


Country of Residence: 
United States 


Departure Date 
Month Day 


Return Date Æ) Home | My Account | Contact AA | Full HTML Version 


有 时 我 们 能 顺利 提交 表单 ， 但 常常 中 途 放弃 。 表 单 流 失 ( 指 的 是 那 
些 还 没完 成 并 提交 表单 就 放弃 的 用 户 ) 是 一 个 非常 严重 、 代 价 高 兄 
的 问题 。 但 与 移动 端 相 比 ， 网 页 端的 问题 还 算 不 上 什么 ， 因 为 狭小 
的 屏幕 和 受 限 的 输入 方式 导致 精 糕 的 移动 表单 设计 简直 没有 留存 的 
余地 。 


因此 ， 在 你 设计 任何 移动 端 表 单 之 前 ， 我 强烈 推荐 你 阅读 以 下 资 
料 来 复习 关于 表单 设计 的 基本 技巧 : 


(Web 表单 设计 : RAMSEY ZA) (Web Form Design: Filling 
in the Blanks, http://www.amazon.com/Web-Form-Design-Filling- 
Blanks/dp/1933820241, Luke Wroblewski Æ, H Rosenfeld Media 
于 2011 年 出 版 ) 

Forms On Mobile Devices: Modern Solutions (http://www. 
smashingmagazine.com/2010/03/1 1/forms-on-mobile-devices- 
modern-solutions/, Luke Wroblewski 7) 

Better Mobile Form Design (http://www.lukew.com/ff/entry. 
asp?1014, Luke Wroblewski 3 ) 

Mobile Form Design Strategies (http://www.uxbooth.com/articles/ 
mobile-form-design-strategies/, Chui Chui Tan 3%) 

Mobile Inline Form Validation (http://www.uxmatters.com/mt/ 


archives/2012/09/mobile-inline-form-validation.php, Steven 


Hoober X) 

Removing Stumbling Blocks in Mobile Forms (http://www. 
smashingmagazine.com/2012/05/03/removing-stumbling-blocks-in- 
mobile-forms/, Robert Brauber # ) 


作为 对 上 述 资料 的 补充 ， 下 面 这 些 表 单 设计 模式 将 有 助 于 你 设计 
出 让 用 户 满意 的 应 用 。 这 些 模式 包括 ， 


登录 表单 

注册 表单 

个 性 化 注册 表单 
结账 表单 

计算 表单 

搜索 表单 

多 步骤 表单 

长 表单 


登录 表单 

登录 表单 应 该 包含 尽 可 能 少 的 输入 : 用 户 名 、 密 码 、 操 作 按 钮 、 
密码 帮助 以 及 注册 选项 。 一 些 应 用 将 这 些 输入 框 全 部 设计 在 同一 
页 面 上 ， 比 如 Remember the Milk 和 Groupon。 


图 2-2 
Z hK Remember the Milk 和 iOS 
版 Groupon: 最 简洁 的 登录 杠 


ef = 
9o remember : 
the mill SD cp 


Never forget the milk 
(or anything else) again. 


theresaneil@gmail.com 


Username 
Required 


Password 


= p Signin | 
Login 
Forgot Password? 


Need a Groupon Account? Sign Up 


男 外 一 些 应 用 ， 比 如 Instagram， 则 首先 显示 登录 和 注册 选项 ， 然 
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后 引导 用 户 去 填写 相应 的 表单 。 你 应 该 让 第 一 个 输入 框 自动 获得 
焦点 ， 避 免 用 户 做 额外 的 点 击 操作 以 打开 键盘 。 


图 2-3 IN WE EUN 
dt m M Instagram: 显示 在 最 前 as 
面 的 注册 和 登录 选项 
& Password 
| 
登录 表单 本 时 应该 利用 一 种 新 技术 一 一 明文 显示 已 输入 的 密码 ， 
这 项 技术 已 获得 了 可 用 性 测试 与 现场 使 用 效果 的 有 力 支 撑 。 比 如 
LinkedIn 的 登录 输入 框 就 明文 显示 密码 ， 同 时 也 为 用 户 提 供 选 项 
来 隐藏 密码 。 开 局 和 关闭 图 标 是 通用 的 ， 或 者 采用 文字 “ 隐 基 / 显 
示 ”( 人 参见“ 注册 表单 ”一 节 中 关于 Polar 的 示例 )。 
图 2-4 
ety LinkedIn: 明文 显示 密码 
的 选项 


theresaneil@gmail.com theresaneil@gmail.com 


Sign In 
(——————'C 


Forgot your password? 


qu wi fe’ n Pel by) fe 1 fe) 0g 10 ld 


al ESI LaS Eta td id. 


ay iSi [a] eee Pb dod d. 


"t ! |! | | | | E 


4 ]! d ]| | d | M. 


Go ?123 = : Go 


其 他 一 些 应 用 ， 比 如 Wunderlist 和 Box， 将 注册 和 登录 选项 放 在 引 
导 页 上 。 通 过 在 每 一 页 上 固定 显示 这 些 选 项 ， 让 新 用 户 一 旦 决定 
使 用 应 用 就 可 以 立刻 注册 ， 同 时 老 用 户 也 一 样 可 以 方便 地 登录 。 


B eF 3:30 PM 


Wunderlist 


Inbox 


m 
B xxx 


Bos HM 
| Sign up for Sunday 
— Set up meeting Jake fro... f 
Make a Dentist appointm... 
E — 
| invoice to Jenn Pa 


Log In With Facebook 


Wunderlist is here to help you 
get things done 


Sign Up 


图 2-5 
iOS 版 Wunderlist: 注册 和 登录 


一 直 呈 现在 引导 页 上 


图 2-6 


Log in 


Username / Email 


Password 


[Wf Remember username 


Forgot password 


AD SPEND 
20 


2012 


Always have your presentation 
ready for clients. 


I'm new to Box 


Log in 
My company uses single sign-on ) 


ZAH Box 让 用 户 在 对 引导 产生 
兴趣 时 可 以 轻松 注册 


比如 Foodspotting 和 SigFig 的 设计 。 


标签 页 是 为 一 种 既 呈 现 两 个 选项 又 能 将 导航 最 小 化 的 可 行 模式 ， 


图 2-7 


Phone 版 SigFig: 登录 和 注册 标 


" 页 Join Foodspotting Sign In S | 9 nN | nN 


SigFig or Wikinvest username 


Hope you're hungry. 
rs >a 
Password 


You can also sign in with your email address. [El 


Remember me 


Email 


Password 


Sign In 


Forgot your password? 


By tapping Sign In, you agree to our Terms of Service and Privacy 
Policy updated October 2012. 


这 些 模式 中 的 任何 一 种 都 可 以 加 上 第 三 方 登录 选项 ， 不 要 与 第 三 
方 注册 混淆 ， 后 者 我 们 会 在 注册 模式 中 讨论 。 第 三 方 登 录 会 让 用 
户 对 其 他 的 社交 媒体 授权 ， 授 权 成 功 后 即 可 进入 应 用 。 


图 2-8 
安 卓 版 Hipmunk 提供 了 三 个 登 
KAM: 创建 账户 、Facebook 登 
录 和 和 谷歌 登录 


Hipmunk would like to: 


View basic information about 
your account 


f Log in with Facebook By continuing, you allow this app and Google to use your 
information in accordance with their respective terms of 


service and privacy services 


g Log in with Google 


[Vf Email me news and deals from Hipmunk! 


Cancel 


Get Started Log in 


Create Hipmunk Account Existing Hipmunk Account 


邮 


还 有 一 种 登录 模式 在 金融 领域 十 分 流行 。 这 种 模式 直接 放弃 用 户 
名 输入 框 ， 只 要 求 输入 密码 。 在 安装 应 用 后 ， 用 户 身 份 就 可 以 得 
到 验证 ， 只 要 再 输入 密码 就 可 以 访问 敏感 数据 。 把 手机 的 PIN 人 码 
作为 密码 也 能 实现 同样 的 效果 ， 这 种 模式 可 以 参考 Frost Bank 和 
Personal Capital 的 例子 。 


ecoco T-Mobile € . 4:42 PM T"» 图 2-9 
ERU 6-diait PIN ^ iOS }k Personal Capital 和 Frost 
ign in using your 6-dig REALE BANKING ' i 
«s FIOSt INVESTMENTS 只 要 求 输入 密码 或 PIN 即 可 登录 


theresaneil@gmail.com 


Reset a forgotten PIN... 


RESET YOUR 


SECURITY CODE 


到 目前 为 止 ， 我 们 看 到 的 绝 大 多 数 例子 中 ， 登 录 表 单 在 启动 应 用 
时 就 会 显示 出 来 。 但 在 很 多 情况 下 ， 最 好 让 用 户 在 使 用 应 用 时 无 
需 登 录 或 注册 . 


你 可 以 畅快 地 浏览 Groupon 和 Etsy， 直 到 想 购买 或 是 收藏 一 件 商 
品 时 才 需 要 登录 (选择 分 享 、 添 加 到 愿望 清单 、 添 加 评论 等 时 也 
可 以 要 求 用 户 登 录 )。 为 什么 你 应 该 让 用 户 不 登录 或 注册 就 能 购物 
呢 ? Jared Spool 在 他 的 “The $300 Million Button” 一 文中 做 了 解 
RE (http://www.uie.com/articles/three_hund_million_button), 者 需 
要 进一步 的 说 明 ， 请 参看 第 11 章 中 Greg Nudelman 所 撰写 的 “得 
zy a 


[小 贴 士 ] 

登录 不 一 定 非得 是 第 一 步 。 
想 一 想 什 么 时 候 验 证 用 户 
身份 才 是 最 合适 的 。 不 要 
在 登录 页 上 进行 创新 ， 采 
用 标准 设计 会 更 易于 用 户 
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图 2-10 E -Mobile 3 5:02 PM Mobile 
iOS 版 GroupOn: 随意 浏览 ， 购 sky High Sports cShare c GROUPON 


买 时 再 要 求 登录 


Sign in to your Groupon account 


f Sign In with Facebook 
or 


theresaneil@gmail.com 


Forgot Password? 


Highlights 
eg Need a Groupon Account? 


360 degrees of trampolines with trampoline 
dodgeball and special kids-only zone for 


Two Hours of Jump Time or Private 
Jump Party for Up to 30 at Sky High 
Sports (Up to 5396 Off) 


$9 Discount Bought Limited 
5396 5,000* Availability 


图 2-11 'TYYYI: 
KEK Etsy: HP "EX" —1ff 


商 T 时 再 要 求 他 登 o SIGN IN REGISTER 
Username 
Password 


Sign In to Etsy 


favorite items. 


Not Now Sign In 


注册 表单 

企业 热爱 客户 数据 ， 所 以 他 们 往往 试图 在 用 户 注 册 时 获取 尽 可 能 
多 的 信息 。 但 注册 表单 应 该 包含 尽 可 能 少 的 输入 项 。 因 为 每 增加 
一 项 输入 ， 就 会 大 大 降低 注册 表单 的 转化 率 ， 所 以 用 户 体 验 顾 问 
兼作 者 Chui Chui Tan 建议 ， 应 该 宣 不 留情 地 砍 掉 “没有 任何 重要 


功能 的 元 素 ”。 经 过 大 量 的 用 户 测 试验 证 ， 比 较 容 易 下 手 的 是 去 掉 
不 必要 的 确认 电子 邮件 字段 和 确认 密码 字段 ， 如 下 图 的 NOOK 和 
LearnVest 所 示 。 


nook: 


Create NOOK Account 


*all fields required 


f 
First Name 


一 
Last Name 


Your email address 


人 
Confirm email address 


(Please Choose a Password 


(Enter Password Again 


etters, numbers, or numeric symbols. 
Nia ananac 


Pattern 7 


a a IE a aa dolos 


A e o a e e ei a e 
ZXCVBNM € 


P 


Email Address 
theresaneil@gmail.com 
Confirm Email Address 
theresaneil@gmail.com 
Password 


eeeecesee 


Confirm Password 


eeeeeeed 


an ee 


OW. YOROG 
AlsjpjrjslnjJjkl 
exu zIx|c|v|BiNIME- 


r : x 
eoooo T-Mobile + 10:12 PM 2 => 
Cancel Sign Up 

First Name Last Name 
Email 
Password 


QIWIEIRITIYIUIIIOIP 


eoooo T-Mobile + 6:02 PM 


《 Back New Account 


theresaneilid v 
theresa@tnid.com vá 
eeeeee 人 4 Oo v 


By tapping "Next" you agree to the 
Terms of Service and Privacy Policy 


112131|4151|6171819]0 


SS 


AISIDIFIGIHIJIKIL ui E: CIISISI@l” 
ES ZIXICIVIBINIMEESI EX a ae ' mE 
2123 space Next ABC space Next 


> 


图 2-12 
安 卓 版 NOOK 和 iOS 版 LearnVest: 
多 余 的 确认 电子 邮件 和 和 密码 的 字段 


图 2-13 
iOS 版 Rove f Kik: 测试 确认 单 
行 电子 邮件 和 密码 字段 的 可 行 性 
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图 2-14 


iOS 版 Path 清楚 地 标注 出 了 选 填 
并 用 弹 框 提示 用 户 确认 电 
子 邮 件 地 址 


字段 ， 


图 2-15 


iOS 版 Polar 是 表单 布局 和 交互 
设计 的 优秀 范例 


58 


确认 电子 邮件 地 址 是 必需 的 吗 ? Path 的 注册 表单 稍微 长 那么 一 点 ， 
但 它 却 清晰 地 标注 出 了 选 填 字 段 ， 而 且 用 提示 用 户 核 对 的 办 法 取 
代 了 重复 输入 邮件 地 址 。 


11:18 PM 


Create Account 


Email Address 
Password Picture 
First Name Last Name 


Phone Number (optional) 


Does your email address 
look right? 


Birthday (optional) Female Male s 
y 9f ği theresa@tnid.com 


Change Looks Good! 


By signing in, | accept Path's Terms of Service and 
Privacy Policy 


注册 表单 可 能 是 你 为 你 的 应 用 设计 的 第 一 个 表单 ， 所 以 你 应 该 建 
了 一 个 易于 阅读 的 标签 标准 。 表 单 大 师 Luke Wroblewski 打造 的 有 
趣 的 投票 应 用 Polar 就 是 一 个 优秀 的 例子 。 注 意 ， 每 个 表单 项 都 有 
即时 反馈 ， 而 且 密 码 项 有 “隐藏 / 显示” 选择， 这 就 使 得 重复 输入 
密码 更 加 没有 必要 。 


Username theresaneil i. Username theresanei! Username  theresaneil 

Full Name Full Name Theresa Neil Full Name Theresa Neil 

Email Email theresaneil@gmail.com Email theresaneil@gmail.com 
Password Password rock HIDE Password ***** 1 


QIWIEJRITIYIUI ! EQIP| IOIWIEIRITI]Y[UI] I JOJP| IOIWIEJRITIYIUJ I [OJP 


AIJSIDIFIGIHIJIKIL A|[SIDIJFIGIH] JIKIL A[SID[FIGIH]J|KI]L 


水 平 对 齐 的 表单 标签 可 能 不 是 最 好 的 选择 ， 因 为 这 样 可 能 会 使 标 
签 显示 不 全 ， 或 者 和 表单 输入 框 挤 到 一 起 。 可 以 考虑 使 用 垂直 对 
齐 的 标签 ， 比 如 Fancy fll Remember The Milk, 


Walkthrough On Apr-5-2011 


date Tue Apr 5/2011 
start time 8:07 AM 


end time ... 


Grade Le... M 


Jeffrey-Spencer Elementary 


p Upload... 0of6 A vV 


| | x à E O@ GB & MG 205m 


Checkout 


First Name Theresa 


Last Name Neil 


Card Number 


Expiration w) v] 
CVV/CVN 
Billing Address 
Street Line 1 
Street Line 2 
City 
Stdabama "| 


Postal Code 


FIRST NAME 


Theresa 


LAST NAME 


Neil 


EMAIL 


theresaneil&gmail.com 


Sign Up 


a a e ble tele 
= ten Vell a a a on dl 
t zxcvbnm € 


.com Next 


123 EN(US 
Sym U (0) i—i 


Sign Up with Email 


Full Name 


Username 


Email Address 
Password 
Create my account 


By creating an account and signing up t i y 
the Terms of Service and Privacy Policy 


还 有 一 个 选择 是 使 用 提示 文字 〈 即 输入 框 中 显示 有 浅 色 的 默认 文 
字 ， 提 示 用 户 该 字段 的 填写 要 求 )。 但 这 会 带 来 一 个 问题 ， 就 是 
一 且 用 户 开始 输入 字符 ， 提 示 文 字 就 会 消失 。 如 采用 户 不 注意 的 
话 ， 很 容 匈 束 扎 了 他 应 该 在 这 里 输入 什么 。 基 浮标 和 俭 是 一 种 新 


图 2-16 
水 平 对 齐 的 标签 可 能 显示 不 全 或 


ES 


图 2-17 
4 卓 版 Remember The Milk 和 
Fancy: 垂直 对 齐 的 标签 往往 更 
好 一 些 


图 2-18 

HEFTER, m e 

F, KNBR RS “AP X 
AEEA 


图 2-19 
iOS 版 Instagram: 内 联 形式 的 实 
时 反馈 


型 模式 ， 可 以 部 分 解决 水 印 式 标签 ( 即 提示 文字 ) 存在 的 易 用 
性 问题 。 在 http://mattdsmith.com/float-label-pattern/ 上 可 查看 这 
一 模式 的 发 明 者 Matt Smith 撰写 的 更 多 相关 信息 。 


eeeoo MDS ^ 


5:00 AM 99% NN — eeeco MDS = 5:00 AM 99% amm 


= New Post = 


New Post 


9 Location E Category 9 Location = Category 


Title 


Title Vintage Military Style Laptop Bag 


还 有 一 种 不 错 的 做 法 是 ， 在 适当 的 时 候 以 内 联 的 形式 给 予 实 时 反 


i APR. ATMEL, WAR 
tot, FEAN Instagram JW RED. 4H f ERU 1x75. HAs 
8 
o 
0000 T-Mobile + 3:53 PM L $ EO e0000 T-Mobile > 3:53 PM l-» @@000 T-Mobile + 3:53 PM -3 EDO 
< REGISTER Done om REGISTER Done = REGISTER Done 
The username theresaneil is not available 
ACCOUNT ACCOUNT 
A theresaneil 4 theresaneilid A theresaneilid 
— & eeeeeee & eeeeeee a eeeeeee 
PROFILE PROFILE PROFILE 
Fi Use Your Facebook Info > 四 Use Your Facebook Info > fi Use Your Facebook Info > 
WA ia m4 


eee M al UI es a ere ee en b eap 


WIEJRITIYIUJ I {OJP 


A[SIDIFIGIHIJ|]KIL 


A|JS[DJFIGIH] JIK]L AISIDIFIGIHIJIKIL 


S ZXCVBNMIS E02ZIXICIVIBINIMIES BZIXICIVIBINIMIES 


123 space Next .2123 Space Next 2123 Space Next 


你 是 否 会 对 密码 的 安全 性 有 特定 的 要 求 ， 诸 如 字母 的 大 小 写 等 ? 
如 采 有 ， 那 就 一 定 要 在 用 户 点 击 “ 提 交 ” 或 “完成 ”按钮 之 前 告 
诉 他 们 ， 不 要 在 之 后 再 显示 错误 提示 信息 。HelloWallet 的 说 明 有 
些 多 ，Level 相对 而 言 则 更 简洁 明了 《尽管 在 我 看 来 ， 它 的 总 体 注 
册 体 验 还 有 改进 的 空间 )。 


@@000 T-Mobile F 4:59 PM © $8?  ecoooT-Mobile = 5:59 PM Da 图 2-20 
@ HelloWallet, LLC 
<Back Create Profile Next iOS 版 HelloWallet 和 Level: fil 
Hellowallet 


一 一 Ry x 
X AL 5 
By creating a profile, you accept 先 显 7S ih 码 要 求 
Level's Terms of Use and Privacy Policy. 
Password Requirements 
@ at least 8 characters 


@ 3 of the 4 below: 
— UPPERCASE letter 


— lowercase letter 


t; character passw rd. at le 
— number 0-9 — special character 
Password 


一 旦 用 户 提 交 了 注册 表单 ， 要 立即 给 予 注册 反馈 ， BWA ak 
Etsy 和 Pageonce 应 用 。 


图 2-21 
"M SEND dc x ik Etsy #1 Pageonce: 表单 
提交 后 就 给 予 用 户 注册 反馈 


6000 


C Establishing secure connection... 
Authenticating... 


Retrieving information... 


在 注册 过 程 中 ， 可 以 的 话 要 让 用 户 始 终 停留 在 应 用 中 。 如 果 你 必须 
链接 到 一 个 网 页 表单 ， 至 少 在 移动 齐 览 右 中 测 Wo POM Il 
用 性 。Windows Phone 版 Fitbit 的 设计 师 显 然 没 有 进行 这 项 工作 。 


图 2-22 
Windows Phone 版 Fitbit: 4A J8 


er BY IP] ERES Hee 


[小 贴 士 ] 

注册 表单 要 简短 ， 表 单 长 
度 最 好 在 一 屏 之 内 ， 操 作 
按钮 要 放 在 可 视 范 围 内 。 
清楚 地 说 明 输 入 要 求 ， 可 
利用 实时 反馈 加 快 注册 过 
程 ， 并 让 用 户 了 解 当 前 状 
况 。 要 考虑 到 所 有 用 户 的 
使 用 情况 。 


eC Get Started 


oma 
Devices 


Zip” Wireless Activity Tracker 
Aria Wi-Fi Smart Scale 
Online and Mobile 

Mobile Apps 

Premium Reports 

App Gallery & Partners 
Developer APIs 

Compare Trackers 


Cool! We're taking you to the fitbit 
account registration page. Once done, 
you'll need to head back to the app for 
sign in. 


Shop Devices 


Sign up 
with a free account 


before getting a 
device 


(e) @ www.fitbit.com/signup x 


应 该 把 注册 当 作 一 个 流程 ， 对 用 户 输 入 的 所 有 可 能 性 考虑 周全 。 
再 以 Level 为 例 ， 我 已 经 有 了 一 个 账号 ，“ 不 小 心 ” 又 重新 填写 了 
注册 表单 。 尽 管 在 我 的 电子 邮件 地 址 旁边 有 一 个 对 匀 一 一 这 显然 
器 我 表明 这 个 邮箱 十 可 用 的 一 一 但 古 我 却 收 到 了 错误 提示 ， 原 因 
古 此 邮箱 地 址 已 被 使 用 。 我 只 能 点 击 “ 烦 人 ”按钮 (Bummer) X 
Tio Be o 


为 什么 不 能 在 我 填写 表单 字段 的 时 候 就 告诉 我 电子 邮件 地 址 已 被 
EHTE? 或 者 至 少 转 到 项 好 我 的 邮箱 地 址 的 登录 界面 ， 而 不 是 
给 我 一 个 硬 生 生 的 错误 提示 ， 且 没有 任何 线索 指明 我 下 一 步 该 做 
TA? 


eoooo T-Mobile * 7:20 PM a m, 
Create Profile Next 
. Sa Wu accept 
Level's Ter mse d Privacy Policy. 
theresaneil@gmail.com v 
9€66e660060 v 
eeeeeeelu Email already used 


Somebody's already created an 
account using this email address. 


Perhaps it was you. 


Bummer. 


M Ne ee Ney ee ee Ae 


Ed 


Ne eee ee ee ee — 


space 


Dropbox 针对 同样 的 情况 给 出 了 漂亮 的 解决 方案 。 一 旦 识别 出 我 的 
邮箱 已 存在 ， 它 会 推测 我 是 想 登录 而 不 是 注册 。 因 为 我 很 可 能 需 


要 找 回 密码 的 指引 ， 所 以 它 会 预先 在 找 回 密码 的 页 面 填 好 我 的 邮 
箱 地 址 ， 这 样 我 只 和 需 扩 击 “ 发 送 ” 即 可 等 待 恢复 账 写 了。 


®0000 下 Mobile © 11:02 PM .7D 0000 T-Mobile = 


11:02 PM 7 
< Welcome New Account Create < Back Recover Account Send 
First Name Theresa Email theresaneil@gmail.com 


Last i P : 
Name Neil This email address already has an account. 
Email theresaneil@gmail.com You can recover your account by creating 


anew password. We will send you an 


Recovery Email Sent 
Password  eeeeeeecccee| email with further instructions. Please look for the password 
一 一 一 一 — recovery email and follow the 
Good 


instructions 


OK 
11213[4[516[|718[9]|0 


图 2-23 

iOS 版 Level: 我 的 电子 邮件 地 
址 已 经 被 占用 ,但 旁 廊 还 显示 了 
Kt A] 


2-24 
iOS 版 Dropbox: 重复 注册 情况 
下 聪明 的 解决 方案 


个 性 化 注册 表单 

这 是 一 种 相对 新 颖 的 设计 模式 ， 其 目的 是 为 用 户 提 供 更 加 个 性 
化 的 内 容 (如 Ness 和 News360)， 通 过 关联 社交 媒体 提升 用 户 体 
验 (A Path 和 Instagram)， 或 是 获取 设置 所 需 数 据 (如 Personal 


Capital), 
稍 后 将 看 到 的 多 步骤 模式 为 我 们 提供 了 更 详细 的 注册 流程 方面 的 
例子 。 


Facebook 最 近 发 布 的 Paper 应 用 以 其 拖 放 选择 感 兴趣 的 主题 这 一 
UI 设计， 成 了 “不 必要 的 复杂 ”类 型 的 反 模 式 案例 (参见 第 11 
3€), Ness 和 News360 则 采用 了 请 动 和 点 击 的 设计 ， 这 种 设计 更 高 
率 ， 而 且 很 容易 单 指 操作 。 若 想 进 一 步 了 解 这 一 理念 ， 可 以 参阅 
Luke Wroblewski 的 文章 “Designing for Thumb Flow” (http://www. 
lukew.com/ff/entry.asp%3F1734%3D) ) 。 


图 2-25 o Service @ 12:06 PM 
iOS 版 Ness 和 安 章 版 News360: Cuisines 


注册 流程 中 的 偏好 设置 提示 Build your own news feed 


Pick the topics you're interested in 


Tap to select your favorite types of food. 
Swipe to see more. Lr Technology 


Si Space +) 


XA Business 


namese 


+ AR 


9 Politics 


@& Good News 


Headlines 


Essential news and analysis from the world’s best 
sources. 


Headlines Tech 


Enterprise 


Enterprise 


11:19 PM 


Find Friends 


Many of your friends may already be on 
Path. Find and connect with them. 


ja] Contacts Find 
E Twitter Friends Find 


M Gmail Contacts Find 


eeooco T-Mobile = 3:54 PM ES m 


FACEBOOK Next 


FACEBOOK FRIENDS 


Instagram is more fun with friends. Find your 
Facebook friends who use Instagram: 


f Find Your Facebook Friends 


图 2-26 

Facebook H 5 #Y iOS 版 Paper 应 
H: 拖 放 这 种 UI 设计 会 耗费 用 
户 更 多 的 精力 (http:/youtu.be/ 
UpZFw2wQr58 ) 


图 2-27 
iOS } Path 和 Instagram: 在 注 
册 流 程 中 鼓励 用 户 找 到 好 友 


表单 | 65 


图 2-28 


0000 T-Mobile = 7:58 PM j-» 


iOS 版 Personal Capital: 电话 号 Provide a number we may call when il Net Worth: $0 ds 
: = = ou want to grant access to new ` 
码 和 资产 范围 的 提示 ， 同 时 提供 Si 


链接 账号 的 选项 — 


Link all your accounts to get a 
complete picture of your net 
worth. 


For more personalized advice, select your 
range of investable assets. 


$100k - $250k 


Link Account 


By pressing Submit, | agree 
to the Terms of Service 


多 步骤 表单 

在 网 页 端 ， 多 步骤 注册 过 程 经 常 使 用 进程 栏 (process bar) “指示 
用 户 他 们 所 处 的 位 置 ， 并 提示 下 一 步 操作 。 但 是 移动 设备 的 屏幕 大 
小 ， 没 有 足够 的 空间 显示 那么 大 的 进程 栏 。 你 或 许可 以 在 标题 栏 里 
挤 进 一 个 ， 但 是 还 有 更 好 的 方法 来 引导 移动 用 户 完 成 一 系列 步骤 。 
在 iOS 版 PayPal 的 早期 版 本 中 ， 利 益 相 关 者 坚持 采用 进程 栏 的 设 
计 。 毕 竞 转 账 是 一 个 流程 。 但 现在 的 PayPal 与 其 2010-2011 版 本 
相 比 ， 简 洁 度 大 大 提高 


图 2-29 
大 约 2010 年 到 2011 年 的 iOS 版 
PayPal: 转账 进程 栏 


â PayPal My balance: $492.00 USD & PayPal” My tote $507.00 USO â PayPal 
Back Bump Phones Q»0 $*Send Money — c 
Recipient —  — Amount 


You are connected with E …: 


© g pshakya-p2@paypal.com 


Now you can choose to: = $15.00 USD 
LEAF Bump to Send Money y ! — 
Payment method: 
A Send money 
USD Balance 
Or send money to a recent contact: a ii 
E …: e Request money " m arrera 


é Jonmichael [means d 


注 1: processs bar 译 为 “进程 栏 ”, 与 进度 条 (progress bar) .进程 条 区 别 。( 译 者 广 ) 


P Send Request Money Sent 
o» Jessica Douglas PAYMENT METHOD 
Bank x-5165 A 
$1.00 USD å 


You're Sending; $1.00 US 
test A 
Total: $1.00 USD 
WHAT'S THIS PAYMENT FOR? 


@ Friends or Family You sent $1.00 USD to 


jlrdouglas@gmail.com. 


; No fee if you use your PayPal balance or bank 
O Goods or Services account for domestic transactions. There may 
be a small fee if you send money across 
No fee if you use your PayPal balance or bank borders 
account for domestic transactions. There may 
be a small fee if you send money across 
borders 


Seni | Mc ) 门 eV 


如 有 条 几 个 步 又 不 得 不 路 屏幕 显示 ， 那 么 你 可 以 不 采用 过 于 密集 的 
进程 栏 ， a ii ideni 和 几 步 的 方法 ， 比 如 SnipSnap 
(显示 在 标题 栏 中 ) 和 Priceline (显示 在 页 脚 )。 


Wimberley, TX 


Sat Sep 28-Sun Sep 29 


© 1/4: Select Favorite Categories 


Select the categories that interest you most. This will 
help us recommend coupons just for you. 


ly Choose A Nearby City in 
1. Kyle (10+ mi) 


2. Buda (15+ mi) 


É Browse All Hotels 4 Name Your Own Price 


Auto Baby 
3. Johnson City (25+ mi) 
Books Arts & Crafts Decor 
Entertainment Electronics shion 
la (a E ate 
Previous Next 


1 of 3 steps E 


在 本 书 第 1 版 中 ，Home Depot B Zi WK AF UR si Wie A, pc PEK se [| nn 
CAERE Esra DEUX. ARRAS ITH ZR, {AEE 
这 个 应 用 的 设计 经 过 了 大 幅 改 进 ， 结 账 页 面 改 成 了 单一 页 面 。 


图 2-30 


2013 年 左右 的 PayPal: 
上 去 清新 许多 ， 原 因 之 一 


TT XE 


图 2-31 


整体 看 
就 是 去 


dt mJ SnipSnap 和 Priceline: 表 


明 当 前 步骤 是 第 几 步 


图 2-32 

2011 年 的 iOS 版 Home Depot: 
TEE WU vp E Xt 

Back SHIPPING ADDRESS Help 


Step 1: Step 2: Step 3: Step 4: 
Shipping Shipping Payment Order 
Address Method & Summary Confirmation 


“First Name 


A ps 
mum EX 


Shop Toolbox Videos 


安全 结账 过 程 的 第 一 步 古 获取 收 货 地 址 。 当 点 击 “ 下 一 步 ” 时 ， 
你 需要 选择 送 货 时 间 。 虽 然 这 时 仍然 显示 收 货 地 址 ， 但 处 于 只 读 
模式 ， 地 址 旁边 放 有 “编辑 “按钮 。 

选 定 送 货 时 间 后 ， 点 击 “ 下 一 步 ” 显 示 付 球 方 式 表单 。 完 成 付款 
方式 表单 后 ， 你 可 以 查看 总 数 并 核对 此 前 输入 的 所 有 信忠 一 一 但 
不 要 离开 此 页 面 一 一 然后 进入 下 一 步 。 


6 Secure Checkout 


Estimated Subtotal $1,079.10 


Add Delivery Address 


All appliances will be delivered to this ZIP Code 
78751 


IMPORT FROM CONTACTS 


78751 austin, Texas v 
(512) 203-7710 
Select Appliance Delivery 


Enter Payment 


8 Secure Checkout 


Estimated Subtotal $1,079.10 


Questions? We Can Help. 
r tomer rt: 1-800-430-3376 


@ Secure Checkout 


Estimated Subtotal $1,079.10 


Delivery Address 


Theresa Neil 
811 Keasbey 
Austin TX, 78751 


Select Appliance Delivery 


Gold 36 in- Gas Cooktop 
in Stainless Ste 


Qty: [1] 


Available Delivery Dates 


Earliest Available: 
Tuesday - 12/03/13 


E] Earliest Weekend: 
Saturday - 12/07/13 


Select from available 


and installation 


(512) 203-7710 


Special Delivery Instructions 


& Secure Checkout 


Estimated Subtotal 


$1,168.13 


Delivery Address 


Theresa Neil 
811 Keasbey 
Austin TX, 78751 


Appliance Delivery 


- Gold 36 in- Gas Cooktop 
ROR in Stainless Ste 
Qty: [1] 


Your selected delivery date is: 
Saturday December 07, 2013 


Enter Payment 


Credit Card v 


Credit Card 


Month v Year VW 


Billing Address 


Theresa Neil - 811 Keasbey v 


Theresa Neil 
811 Keasbey 
Austin TX, 78751 
(512) 203-7710 


+ Add a Gift Card 


Send confirmation email to: 


+ Add PO/Job Code 


NEXT STEP 


TurboTax SnapTax 采用 了 类 似 的 设计 。 但 是 每 一 步 的 详情 收 起 ， 
可 点 击 癌 下 展开 ， 而 不 是 全 部 显示 在 同一 页 上 。 这 个 单 页 设计 可 
供 了 有 价值 的 导航 信息 (整个 过 程 有 三 步 ， 其 中 有 两 步 还 没有 完 
成 )， 同 时 也 使 高 层级 的 摘要 内 容 成 倍增 加 。 


图 2-33 


2013 年 的 iOS 版 Home Depot: 


大 幅 改 进 的 结账 流程 


表单 


图 2-34 
Intuit A =] AY 3c Wk e iOS 版 
TurboTax SnapTax: 向 下 展开 显 


示 详情 


[小 贴 士 ] 

向 用 户 显 示 他 们 当前 所 处 
的 位 置 和 下 一 步 ， 但 不 要 
使 用 拥挤 的 进程 栏 。 去 掉 
不 必要 的 输入 字段 ， 最 小 
化 页 面 的 数量 和 步骤 数量 。 


> e» E al 


TurboTax S SnapTax 


| 
| 


ttité wo 'oberg weg f 


Federal California 


32,234 ‘840 


Refund Refund 


?一 一 — 
-a a cm amem a | 


paru pueg Cer 
«| 


TD 


itlt& vo "obera um 
* "4 o£ 
"o> [loons NN 
, IT 


ba we Snap Photos 
1 «x 2forms added 


‘tp C". Tell Us About You 


STE 
2 We'll ask simple questions 
e " . 

STEP & Preview Your Taxes 
3 We'll get you ready to file 


File Your Taxes 


^d Bi EAE — Bap AR EP) EUIS. "EAR IH AESURUWBJZETEUCE, 
而 是 需要 实现 返回 一 前 进 的 导航 。 星 巴克 为 了 在 它 的 Drink Builder 
工具 中 实现 这 一 效果 ， 只 使 用 了 “下 一 步 ” 和 “返回 ”风格 的 按 
H. ^ 

这 个 表单 用 起 来 还 不 错 ， 但 是 如 果 不 打开 每 一 个 选项 并 滚动 整个 
列表 ， 就 很 难看 出 定制 页 上 已 经 设置 过 的 内 容 有 哪些 。 


HE: 最 新 版 本 的 美国 区 星巴克 应 用 已 经 去 掉 了 Drink Builder 功能 。 此 前 用 户 
通过 应 用 定制 的 咖啡 可 以 截屏 保存 成 图 片 ， 并 在 购买 时 出 示 。( 译 者 注 ) 


. T-Mobile + 3:20 PM 


Drink Builder 


oo T-Mobile + 3:20 PM 


Drink Drink Size 


Venti 
Grande 
Tall 


Short 


Grande Cappuccino 
16 oz 


On 
tH 


T-Mobile + 3:25 PM 


n 


Choose Your Preparation 


Ask Me 


Double Blended 


Double Cup 


For Here Cup 


Ristretto 


Stirred 


Upside Down 


With Room 


. T-Mobile > 3:20 PM *eeeco T-Mobile = 3:20 PM 


Temp Hot Drink Types 


Brewed Coffee Classic Espresso 


Brewed Coffee > =] 
Espresso NN ai 
. [ All Year } Year 
Classic Espresso > 
Caffé Latte 
Signature Espresso > 
es Caffé Mocha 
Brewed Tea > 
Tea Lattes > „į Cappuccino 
Espresso 
Chocolates > Spross 
Juice > Espresso Con Panna g 
Milk Beverages > ^ 


Espresso Macchiato = 


ee T-Mobile 7 3:21 PM T-Mobile = 3:25 PM 


ups Toppings AGEE 


Choose Your Toppings 


Size Customize 
Milk Syrups 


Caramel Brulée 
Topping* ə Reg 


Caramel Drizzle 
Chocolate Powder 
Cinnamon Powder 
Hazelnut Drizzle 
Mocha Drizzle 


Nutmeg Powder 


© 
© 
© 
© 
© 
© 
© 
A 


Pannermint Whinned Croam* 


* Seasonal Ingredient 


Grande Cappuccino 


Nutrition 


ee T-Mobile = 3:26 PM ee T-Mobile + 3:26 PM 


Cancel Notes Drinks Saved Drink 


Nickname Favoritd 


Owner 


m 


olw||n|r|v|v]1]o]e. 
A[s|p|e|e|n]» [x]. 


Favorite 


Grande Ask Me Brulée Topping Caffè 
Latte 


*Contains seasonal ingredients. 


Owner: me 


一 个 简单 的 修正 办 法 是 ， 在 底 端 的 “成 分 ”(Nutrition) 标签 和 
"f (Info) 图 标 附 近 固 定 放置 一 个 “概要 ”(Summary) 或 
“详情 ”(Details) 按钮 。Audi Configurator 就 完 完 全 全 是 这 样 设 计 


HJ, mubk “PR” ”按钮 打开 显示 目前 选择 的 全 部 参数 。 


图 2-35 

星巴克 的 iOS 版 Drink Builder: 
“下 一 步 ” 和 “返回 ”风格 的 按钮 
( http://www.youtube.com/watch 
?v-Bvke0dXD2SM ) 


图 2-36 
iOS 版 Audi Configurator: 点 击 
固定 的 “详情 ”(Details ) 按钮 
显示 选 定 的 选项 


图 2-37 
iOS 版 The North Face: 每 当 我 
要 结账 时 都 显示 连接 超时 ! wx! 
Att A X PSE gu Ww ST 


Audi ELEN EEN, p 
Config t b EEE Engines err: Seat upholstery HE Your Audi 


guraror Boo 
z 
" 2 A4 Avant A4 Avant A4 Avant 
2.0 1FS1 moltitronk 20 551 muttitreni 2 O TESI moltitronic 
"7" Audi A1 Total Arica (eet tank © 4 $80,000 Total Price Cont tàn). © 4.995000 Total Price Goth tao). V 4 $315,000 
wu f from ¥ 2,730,000 loapa ¥0 (qugmet: 5 355.0 Lopert 8 355.0 
", x 


Audi A3 
from ¥ 3,080,000 


Audi A4 
from W 4,400,000 


Audi A5 
from ¥ $,500,000 


E son 


(E) My configurations 


Audi A6 
Q Languages from V 6,100,000 


结账 表单 


截止 到 2013 年 1 月 ， 有 大 约 15% 的 电子 商务 是 在 移动 设备 上 进行 
的 ， 几 年 内 这 一 数字 有 望 超过 25 多。 然而， 即便 是 从 手机 端 开 始 
的 购物 体验 ， 大 多 数 人 也 会 选择 在 条 面 病 、 平 板 或 是 零售 商 那 里 
完成 交易 或 结账 。 


在 许多 案例 中 ， 这 种 情况 的 出 现 多 半 要 归咎 于 极为 精 糕 的 结账 体 
验 ， 这 在 众多 商家 的 原生 应 用 中 屡见不鲜 。 换 言 之 ， 这 是 因为 许 
多 商家 都 只 让 用 户 在 其 应 用 中 购物 ， 而 要 跳 转 至 优化 后 的 移动 网 
站 进行 结账 。 


SHOPPING CART CHECKOUT 


WOMEN'S OSITO JACKET SHIPPING 
Color: METALLIC SILVER ~ 
Size: M 


Quantity: cp Ship to a Store 


Price: $99.00 
Ship to an Address 


an error has occurred! Your checkout 


imed out. Please try again in a few 


Go Back 


eak / * 


Subtotal: $99.00 Checkout 


让 你 的 用 户 在 兴致 最 高 的 时 候 就 能 购买 。 不 要 让 差劲 的 用 户 体验 
阻碍 你 的 客户 在 手机 上 结账 ， 节 好 让 他 们 就 在 购物 的 应 用 里 结账 。 
下 面 是 一 些 高 转化 率 的 支付 流程 的 设计 技巧 。 


技巧 1: 同时 提供 登录 、 注 册 和 客人 用 户 选 项 
允许 客户 在 账号 信息 中 保存 其 个 人 资料 ， 以 便 将 来 快速 结账 ， 还 
应 提供 客人 用 户 结账 的 选项 。 你 完全 可 以 在 用 户 完成 支付 后 提示 
他 们 去 创建 账号 ， 这 样 给 人 的 体验 会 更 舒服 。 


T-Mobile = 4:34 PM 


4:35 PM | - 图 2-38 


— San Francisco 
QMS Thu, Nov 28 - Sat, Nov 30 


12:54PM — O-O-O-O | iOS 版 Expedia: 登 K A 后 填 写 
10:6 AM | 旅客 结账 表单 与 付款 细 市 


San Francisco 


IIGNTS Thu, Nov 28 - Sat, Nov 30 


12:54 PM 


Expedia 


10:45 AM 


LY theresaneil& gmail.com x 


or 


| f Login with Facebook 


o Traveler details > 


o Traveler details 


Emg Payment details BE Theresa Neil's MasterCard @ 


hat | have read 


, the Terms 


king | agree t 
Restrictions 
ditions, the Privacy Policy and Fare 


Information 


nam 


" 


gg 


AlslplFleln) 


Pass isa aioea (D2 $526.10 


pe $526.10 Et 


图 2-39 

iOS 版 Target 和 Walmart: Bt 提 
供 了 登录 /注册 选项 ， 也 提供 了 
客人 用 户 结账 的 选项 


ee T-Mobile + °*” 5:21PM 24 ee T-Mobile A 4:38 PM 


shopping cart cancel 


checkout as a guest 


Cancel Sign In 


SIg n I n Forgot your password? 


sign in to Target.com © Sigin | 


email address 
Continue as Guest 


password 


forgot password? 
CD "Án 


or 
create a target.com account 


see our privacy policy 


cart number: 911417347442 
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图 2-40 
iOS 版 Haute: 单一 结账 页 上 有 
额外 的 页 面 ， 用 于 添加 详细 信息 


图 2-41 
iOS JK Gilt 和 RuLaLa: 输入 地 


址 时 可 选 导 入 / 自动 填充 


技巧 2: 简化 流程 

弃 用 进程 栏 ， 把 分 屏 步 又 融 合 进 一 个 结账 页 (参见 “多 步 又 表单 ”一 
节 中 关于 Home Depot 这 一 优秀 例子 的 讨论 )。Haute 和 苹果 公司 等 雪 
售 商 设计 了 包含 多 个 区 块 的 单一 结账 页 表单 ， 方 便 用 户 逐 级 深入 地 点 


id BEERS. 


SHIPPING ADDRESS 


CHECKOUT PAYMENT METHOD 


14:51 Left until items in your cart expire 


Payment Method 


© Adda Payment Method > 


Ship To 
© Adda New Shipping Address > 


Cart Subtotal United States > 


Discount Code: 

Sales Tax 

Shipping 

HauteLook Credit 

Total Charge 

You're saving $120.00 off retail! 


ojw|e|R|T|Y|U| olp 
A|s|p]rje]u]v]k]. 
ed zixic is 


E Next 


技巧 3: 提供 省 时 的 快捷 方式 

提供 “导入 通讯 录 地 址 ”选项 ， 以 便 用 户 能 够 快速 填写 收 货 地 址 
和 账单 地 址 。 还 可 以 考虑 采用 “扫描 卡片 ”的 功能 ， 为 用 户 省 去 
输入 全 部 信用 卡 信息 的 麻烦 。 


8:57 PM 
New Address 

ET 
First Name Last Name 

Theresal Neil 

AutoFill 
— Complete this form in no time using 
: r k. 
United States = > ynoraddmes boo 
Would you like to use AutoFill now? 

Street Address 


Use AutoFill 


Cancel 


oY I ES d PD qo] 


A (Si WD) 16 (Gi ie WW DEC 


° Bae jg j| d NS 


£7123 space Next 


图 2-42 
iOS 版 Gilt: 由 card.io 公司 提供 
支持 的 “扫描 卡片 ”选项 


No Service + 8:58 PM 


New Payment 


vs QO L3 oscevem 


First Name Last Name 


Theresa Neil 


No More Typing! 
With card.io, entering your credit 
card information is easy. Just hold 
your card up to the camera, and 


Card Number 


[^9] SCAN CARD 


we'll do the rest. 


Expiration Date Security Code card.io is free and secure. 


o mBEE Raw) kell OK 


A he, Py ie) Wa lll p FE 


个 Bake NS 


.?123 space Next 


Mi ae FT 7:19 图 2-43 

(@ cart | NE iOS 版 Gilt #1 2 # Jk Newegg: 
其 他 可 选 的 付款 方式 ， 通 过 
PayPal 和 Google Wallet 付款 


No Service > 9:56 PM 


New Payment 


-— Subtotal $399.99 
Gilt Groupe LX) 
f | T : 
| XJ Estimated Total: $31.95 USD (2 | - 35.00 
á A Shipping $0.00 
Login PayPal ù 
Bg 9 Gift Card $0.00 
Log In with email and password: 5 Promo Code $0.00 


| theresaneil(? gmail.com x | 


Grand Total $399.99 


Or Checkout with 


,'"——————————— ———— Y 


Don't have a PayPal account? 
Pay with a debit/credit card 
or Bill Me Later 


Problem with login? 
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图 2-44 
iOS 版 Uber 集成 了 Google Wallet, 
简化 了 订 车 流程 


WEBS ER A. CONFIRMATION CANCEL RECEIPT 


$15 


WwW Google Wallet 


e$ 


9 405 HOWARD STREET e 405 Howard Street, San Francisco + 


YAN a 


e á E 
EB Y) Google wallet CHANGE 
= 
FARE ESTIMATE PROMO CODE 


Google ) 


kkk*x 


e 
TAXI Up “Se suv 


Dama 


— 


PICKUP TIME IS APPROXIMATELY 4 MINS 


25 E ATE FAP qe BE— Pa ER EZ CER. SEDE HE HE T 
一 个 快速 结账 (Express Checkout) 的 选项 ， 让 用 户 可 以 自行 设置 。 
亚马逊 则 在 产品 详情 页 上 放置 了 一 键 结账 按 钮 。 在 下 面 的 截图 中 ， 
有 两 个 移动 端的 一 键 结账 按钮 ， 都 使 用 了 色彩 鲜艳 的 、 行 为 召唤 
的 栖 色 和 形象 的 一 键 点 击 图 标 。 


图 2-45 
CANCEL ADD PAYMENT 
iOS 版 Uber 也 提供 信用 卡 扫 描 | Ice 
功能 和 使 用 PayPal 付款 的 选项 | 1 — E 


y. 


© scan your card 


card here. - 
utomaticall 


duit 


=» (U 
© S) 
24 
^) uu 
rs 
— 


1990 


Cancel 


Would you like to set up Express 
Checkout shopping? 


No Thanks 


No Service 9:54 PM € 1 
< B Zutano Owls Fitted Crib S... [| 


=  —O— wr 
Ista: BEEN EM (0) 


Customers Who Bought This Also Bought 


Zutano Owls Velour Zutano Owl Velour Zutano € 
Changing Pad Cover and Sherpa Blank...  Embroidere: 
$15.99 $24.0( 
In Stock 
Ships/Sold by Amazon.com 


Gift-wrap available 


Lay Q NU A eoo 


Home Search Cart Wish List More 


#2195: Tj» Dr im 


RUN CAE E OEE vts pg, 947 A E Py RU Ae 2 D oc HT Ul 
程 对 我 们 来 说 已 经 相当 熟悉 了 ， 但 移动 零售 还 有 很 大 的 创新 空间 。 


SEHR. RIRE, Target 以 及 其 他 零售 商都 着 眼 于 更 多 的 移动 端 销售 


转化 ， 不 断 地 在 店内 店 外 符 试 新 的 结账 体验 。 


比如 ， 沃 尔 玛 的 Scan & Go 功能 让 店内 消费 者 可 以 通过 扫描 商品 的 
方式 来 将 其 加 入 购物 车 ， 这 避免 了 在 店内 排队 结账 。 据 沃尔玛 称 ， 


超过 一 半 的 新 用 户 最 终 都 会 再 次 使 用 该 功能 。 


2-46 
iOS 版 苹果 商店 和 亚马逊 : 快速 
结账 选项 


[小 贴 士 ] 

通过 简化 支付 流程 、 去 除 
不 必要 的 步骤 并 提供 快捷 
方式 ， 完 成 移动 端 转 化 设 
Fo WMA HA R I 
物流 程 ， 同 时 充分 利用 原 
生 移动 设备 技术 。 
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图 2-47 
iOS 版 沃尔玛 : Scan & Go 功能 
让 你 可 以 扫描 选 购 的 商品 ， 省 去 
排队 结账 的 麻烦 


1:20 PM 


Store Mode 


Rollbacks 


Walmart Supercenter 


5095 Almaden Expy > 
San Jose, CA 95118 Open 24 Hours 

9 xX (d - 
Store Coupons List Scan & Go 


图 2-48 
苹果 商 店 拥 有 EasyPay H Àj a 账 Welcome to the Apple Store 
功能 Upper West Side 


| Sore 


Get Help Get Support 


Pay 


Next Workshop in (ch ^ Log in with your Apple 
Mac OS X Tips and Tricks =e J CN NX ID and pay with the 


credit card on your 


iTunes account 


Rela AQ 


uU = 沃尔玛 加 拿 大 联合 美 泰 (Mattel ) 
了 Sa AT. VIRTUALTOY STORE Cc ^ 设立 的 虚拟 玩具 店 (http://www. 


newswire.ca/en/story/1253739/ 


—- 


mattel-and-walmart-canada-offer- 
holiday-shoppers-toys-on-the-go ): 
扫描 二 维 码 购买 商品 


[zl 9-50 
IS] cC-9U 


Target 和 CBS Outdoors 合作 ( http:// 
www.cbsoutdoor.com/creative/ 
coolcampaigns/target-holiday-gift- 
finderaspx ): 公交 车 站 成 为 “ 数 
字 假日 体验 ” 


ShopKick 用 来 找 优 惠 的 Shop 
Beacon (http://techcrunch. 
com/2013/11/20/shopkick-rolls- 


out-ibeacon-enabled-shopping- 


alerts-with-shopbeacon-with-macys- 
as-its-first-trialist/ ) 和 用 来 接收 
ft xk 的 PayPal Beacon ( https:// 
www.paypal.com/webapps/mpp/ 
beacon )， 都 使 用 了 基于 附近 位 
置 的 蓝牙 技术 ， 个 性 化 并 简化 了 
移动 购物 


图 2-52 


Valspar Paint Calcu lator 的 输 入 


FREE RE, 


比 Behr Paint 


Calculator 更 易于 阅读 


计算 表单 

Teas RUA, Le eos ER eat. Bua TA as LA ta V 
器 ， 都 需要 用 户 输 入 。 虽 然 这 些 表 单 可 以 采用 自 定义 控件 和 布局 ， 
但 是 遵循 基本 的 设计 规范 以 保证 表单 的 易 读 性 依然 十 分 重要 。 

对 章 方式 、 标 签 、 字 体 、 按 钮 位 置 、 对 比 及 上 颜色， 这些 全 部 都 是 
影 啊 移动 表单 易 用 性 的 因素 。 比 如 ， 比 较 一 下 输入 字段 和 标签 设 
计 极 为 优雅 的 Valspar Paint Calculator 和 Behr Paint Calculator 两 者 
的 易 读 性 。 


iPod = 9:18 PM = | 5 9:21 PM 


suck Paint Calculator 


Back valspar paint™ 


Select Measurements Units 


Enter the details of the room you wish to paint. 


Sures Medium, Large | Custom 


plan a project 
Interior Calculator 
Select a room size 


medium 


Room Length Doors E11 


Length of Room 0 ft Room Width Windows [4] 
: Fr N 
WE HM " Vaulted Ceiling? Yes 
Height of Room 0 
一 -一 一 Need Touch Up Paint? 
# of doors 0 
# of windows 0 Calculate 


Cancel Calculate 


Ac HF B LEE a nz Pr TOR a A ZEB HUE C. EUH o, 
TaxCaster EH T s DURGA Ed Ze, EIE ACRIOR POE sk np T4 
化 。 测 量 仪 在 数据 输入 后 即时 更 新 。 


uno gA 


Æ TaxCaster 


$0 


FED TAX REFUND 


名 About You 
Your Income 


EX. Your Tax Breaks 


e Final Result 


inturi. Take a look at how health 


Turbotax@ care is changing. 


See whether it will have any affect on you and your taxes. Learn More 


2013 Details 
XY 


> 


"Br MCN > 


4g Your Pay & Taxes Wit... 


2013 Details 
V 


$3,944 


FED TAX REFUND 


Your Federal Taxes Withheld 
$0 - $35k 


Your State Taxes Withheld 


— À: 
$15k 


Your Unemployment Income 
æ $0 
$25k 


inturi. Take a look at how health 


Turbotax@ care is changing. ) 


$7,000 


See whether it will have any affect on you and your taxes. Learn More 


Zillow 和 Trulia Real Estate Calculators 也 提供 了 输入 数据 的 实时 可 


VUE. 


e0000 T-Mobile + 


6:06 PM 


Payment Affordability Refinance 


You can afford a 
$303,299 home 


$177 $1,304 
Mortgage Principal & 
Insurance Interest 
$126 $341 
Homeowners Property 
Insurance Taxes 
? 
Annual Income $75,000 
p———————— ORBE q 
amm. 
Down Payment $30,000 (10%) 
a 
Monthly Debts $300 


> 


Calculators 


@0000 T-Mobile + 


6:06 PM 


Payment Affordability Refinance 


You can afford a 
$1,233,505 home 


$902 $5,745 
Mortgage Principal & 
Insurance Interest 
$513 $1,387 
Homeowners Property 
Insurance Taxes 
? 
Annual Income e $295,000 
A UV FW ) 
Down Payment $30,000 (296) 
-— 
Monthly Debts $300 


mm 


Calculators 


图 2-53 
安 卓 版 TaxCaster: 输入 变化 时 
测量 仪 随 之 更 新 


[小 贴 士 ] 

计算 器 表单 布局 应 该 使 用 
标准 化 表单 设计 。 在 符合 
应 用 使 用 场景 的 情况 下 ， 
增加 交互 可 视 化 。 


图 2-54 
iOS 版 Trulia Real Estate 
Calculators: 实时 反馈 
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图 2-55 ° T-Mobile + 2:36 PM = T-Mobile + 2:36 PM = 
iOS 版 Zillow Mortgage Calculator: = Your payment $1,522/mo = Your payment $2,322/mo 
k ar 数 据 时 m 不 变 化 PAYMENT BREAKDOWN PAYMENT BREAKDOWN 


Tap the chart to see what 
goes into your payment 


Principal & interest 


$1,820/mo [i| 


Price a | $300,000 Price ee 加 $465,000 
%Down ($60k) 20.0% %Down ($93k) 20.0% 
Rate — 4.20296 Rate — 4.20296 


More... Advanced More... Advanced 


RRE 


有 些 搜索 功能 需要 输入 多 种 条 件 以 生成 搜索 结 末 。 和 其 他 表单 模 
式 一 样 ， 搜 索 表单 应 该 只 有 最 核心 的 、 不 可 或 缺 且 输入 字段 ， 并 
提供 合理 的 默认 值 。 你 完全 可 以 在 搜索 结 末 页 提供 角 选 功能 ， 让 
用 户 对 结果 列表 进行 细 化 。 在 这 里 我 只 讨论 表单 本 身 ， 关 于 搜索 、 
排序 和 入 选 模式 的 更 多 内 容 ， 可 参阅 第 A E, 


比较 看 看 American Airlines 搜索 表单 的 混乱 布局 与 Kayak HJ Trj 9€ 
设计 。 


图 2-56 EE 
2013 年 Windows Phone 版 Po Jim round-trip 


American Airlines 和 Kayak: X Return Date 


B | 
s. 与 A 洁 Round-Trip One-Way Month|v] L pay 加 
From: Early Morning v] 
To: 1M — Adult (16-64) 
Find Code 

Show Results By: : 

Cabin Preference: 
(e) "nee O Schedule Economy - With Restrictions|¥| 


Country of Residence: 
United States 


Departure Date 


Month|v] Day|v] 
Early Morning v] 


Return Date 


Zillow 在 表单 页 上 可 直接 预览 搜索 结果 的 数目 ， 这 个 设计 不 错 。 如 
果 你 注册 了 Zillow 账号 ， 可 以 保存 这 项 搜索 ， 为 将 来 的 搜索 节省 
时 间 和 精力 。 


《 Map For Sale 277 Results B X Map For Sale 54 Results 
al ions i 


Listings 


@ FORSALE wv 


«^ 
6 PRE-MARKET @ v <>) @ PRE-MARKET @ v 


@ RECENTLY SOLD C © RECENTLY SOLD C 
PRICE PRICE 
Any Price $290K - $600K 
-< — 
Beds Beds 


Baths Baths 


Lianan T ` | 


See 277 Results Reset Save Search See 54 Results Reset Save Search 


Hipmunk RRRA [a] Pe Te] TE, mHE T ARN ee HE. 
标价 提醒 和 保存 搜索 功能 相似 ， 都 是 通过 保存 搜索 条 件 进一步 提高 
移动 用 户 的 效率 ;与 简单 地 保存 搜索 不 同 的 是 ， 当 标价 变化 时 ， 票 
价 提 醒 功 能 可 实现 应 用 内 通知 。 这 起 Hipmunk 获得 成 功 的 关键 因 
素 之 一 ， 因 为 这 个 提醒 使 用 户 一 次 又 一 次 重新 打开 应 用 。 


12:36 PM bile + 12:37 PM 


Flight Search Searching 


Get free Fare Alerts! 
Get notified immediately when prices change. 


" AUS 3 SFO 
Bergstrom l... San Francisco 


Return 
B Fri, Nov 01 Thu, Nov 07 


| Subscribe to this Alert | 


This will not interfere with your search 


让 我 们 看 看 OpenTable 2011 年 的 搜索 表单 ， 再 对 比 一 下 它 为 10S 7 
新 设计 的 表单 。 早 期 的 设计 版 本 是 一 个 完整 的 搜索 表单 ， 有 4 到 5 
栏 输入 字段 ， 还 有 一 个 醒目 的 红色 行为 召唤 按钮 。 


图 2-57 
iOS 版 Zillow 可 以 在 输入 表单 时 
实时 显示 搜索 结果 的 数目 


2-58 
iOS 版 Hipmunk: 标价 提醒 功能 
为 保存 搜索 功能 添加 了 省 钱 利器 


[小 贴 士 ] 

搜索 表单 要 短 而 简单 ， 搜 
索 条 件 尽 量 控制 在 一 页 内 
或 更 少 。 提 供 合理 的 默认 
值 和 保存 搜索 的 选项 ， 以 
便 将 来 使 用 。 
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图 2-59 
2011 年 OpenTable 的 iOS 版 和 安 卓 
版 : 用 户 必 须 输入 全 部 搜索 条 件 


图 2-60 
iOS 7 版 OpenTable: [E Xd ZA 
动 建 议 附近 可 选 的 餐厅 


-AraT © 12:16 PM = (igo. AB A MAO «2» 
Select Location Find a Table Find a Table 
San Francisco Bay Area LOCATION 
Ben Bee Current Location © 
| Castro / Noe / Glen Park >| 
/ DATE & TIME 
| All Restaurants > | | Sat, Jun 4, 2011 aj L 7:00PM | 
Date & Time Party Size PARTY SIZE 
f 2 至 
| Fri. November 21, 8:00PM Im ie 
MAX RESULTS 
= Opentable raters 


在 iOS 7 版 的 设计 中 ， 首 页 是 附近 的 餐厅 列表 和 当天 可 能 订 到 座位 
的 时 间 。 这 是 一 个 隐 式 搜索 (Implicit Search) 的 例子 ， 我 们 会 在 
第 4 章 中 讨论 。 现 在 的 搜索 表单 上 只 有 三 个 输入 字段 ， 其 中 餐厅 
名 称 一 项 还 可 开局 自动 建议 功能 。 


Searching... P 3:36 PM 7) -_ No Service > 3:36 PM 7c = No Service > 3:36 PM Ti" 
Q ore s = tonight ® Cancel Search < Explore Q 
= Hyde Park Bar & Grill -... Table for 2, tonight at 7:00 PM 
b 6:45 PM 7:00 PM a ny 
G Hancock, Austin 
fr The Salty Sow 1 
M Hyde Park Bar & Grill - Duval 
i ED -| Hyde Park Bar & Grill - Duval 
Hyde Park Bar & Grill - West Gate 
El Chile Cafe Manor Menu Info Reviews 
KES Hyperion Public 
QIWIEIRITIYIU] I JOIP 
E Table for 2, tonight at 7:00 PM 
Olive and June 
i icio 
PM 7:1 
cn EBD Z > xcveBNuG 
DETAILS 
o v m ~ E 


长 表单 

一 些 表单 不 能 只 放 进 一 屏 之 内 。 在 这 种 情况 下 ， 长 的 滚动 页 比 把 
表格 切 分 成 多 页 要 好 得 多 。 设 计 长 表单 景 幸 手 的 部 分 在 于 ， 应 在 
何 处 放置 执行 和 退出 按钮。 


在 大 多 数 iOS 应 用 中 ， 表 单 在 模 态 环境 下 显示 。iOS 7 设计 指南 
(https://developer.apple.com/library/ios/documentation/userexperience/ 
conceptual/mobilehig/Modal.html£//apple ref/doc/uid/TP40006556- 
CH64-SW1) 中 建议 ， 命 令 按 钮 放 在 右上 角 ， 退 出 键 〈 一 般 叫 作 返 
回 或 取消 ) 放 在 左上 角 。 


a ng... F 3:41 PM 1 > .. e A LII T 
PAYMENT METHoD < 


Your personal information 


We keep this infomation secure and " 
use it to verify your identity. Card type Credit Card 


Cardholder THERESA NEIL 
YOUR LEGAL NAME 
Theresa 
Card number [ER 
Nei 
Expiration date 04/15 
YOUR HOME ADDRESS 
Card name Visa = 
Notes 
Unite d States 
w å 
YOUR PHONE NUMBER Type Personal 


Upgrade to PLUS and we will notify you 45 
ays in advance before your card expire: 


remain private. 


YOUR DATE OF BIRTH Balance 


Windows Phone 8 设计 指南 (http://msdn.microsoft.com/library/windows/ 
apps/ff431806(v=vs.105).aspx) 中 建议 ， 命 令 按 钮 应 该 放置 于 应 用 栏 
(固定 显示 在 页 面 底 端 ) 上 。 


ae 3:36 


ELENA'S TEA CO. 


new transaction 


$125.52 On [ | 


h 


, change 
$11.92 $137.44 


4111 1111 1111 1111 


graymond@example.com 


然而 , 安 卓 指南 的 建议 (http://developer.android.com/desien/patterns/ 
actionbar.html) 则 完全 不 同 。 自 从 Jelly Bean (454) 发 布 以 来 ， 
安 持 的 设计 指南 就 建议 ， 命 令 按钮 应 该 放 在 操作 栏 (固定 在 屏幕 
Dim) 上 。 

遗憾 的 是 ， 我 在 2013 年 年 末 撰 写本 书 的 上 时候， 这 条 安 掉 设计 指 璀 
在 测试 中 表现 不 佳 。 在 我 们 对 众多 客户 做 的 用 户 测 试 中 ， 大 部 分 
用 户 找 不 到 或 者 根本 没 看 见 操 作 栏 上 的 按钮 。 随 着 越 来 越 多 的 用 


图 2-61 

iOS 版 HauteLook、Square 和 
Lemon Wallet: 命令 按钮 放 在 左 
LA 


图 2-62 

Windows Phone 版 OLX 和 
Innerfence: 命令 按钮 放 在 应 用 
栏 上 


[小 贴 士 ] 

不 要 特意 把 表单 分 割 成 多 
页 步骤 ， 单 页 滚屏 更 可 取 。 
要 果断 放弃 任何 没有 必要 
的 输入 字段 。 按 钮 位 置 的 
设 定 要 遵守 操作 系统 规范 。 
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图 2-63 
4t 8 lk DigiCal 和 Vine: 模 态 表 
单 和 简洁 的 分 享 表单 示例 ， 它 们 
分 别 将 命令 按钮 放 在 了 操作 栏 上 


图 2-64 
Z E. JR Ancestry fü Notif: 命令 
按钮 固定 在 底 端 


户 升 级 他 们 的 设备 和 操作 系统 并 对 新 的 导航 规则 越 来 越 熟 悉 ， 
一 可 用 性 问题 可 能 会 未 汤 减少 。 与 此 同时 ， 一些 安 日 应 用 还 是 
在 的 闹 位 车 固定 显示 命令 按钮 。 


ix 
ZN 
Z 


XK CANCEL 


My calendar 
My calendar 


[Title 


Location p] Post to Vine 


COLOR 


= (Default) 


DATE & TIME 


Twitter 


Mon, Sep 23, 2013 " 11:30 PM P 1 ]| ] 


a Es. fan Eta Eg? Ed E EK 
Tue, Sep 24,2013 — 12:30 AM 


T 人 


(UTC -5:00) Central Time 章 P 1238 


REMINDERS 


15^ miniites Nntificatian IE 


.. 9 Notif fu 
First & Middle Names DEFAULT BIG TEXT BIG PICTURE Lis 
Title re] 
Surname 
f Content 
Priori Normal 
Gender y 4 
| | Ongoing notification? 
Female 
Birth 
Date 
Location 
Death 
Date 


CREATE 


。 常见 表格 模式 
基本 表格 (Basic Table)、 无 表 头 表格 (Headerless Table)、 国 定 列 表 
格 (Fixed Column)、 概 览 加 数据 型 表格 (Overview plus Data), fT 
分 组 表格 (Grouped Rows)、 带 有 视觉 指示 器 的 表格 (Tables with 
Visual Indicators) 、 可 编辑 表格 (Editable Tables) 


本 书 第 1 版 中 ， 我 在 本 草 开 头 提 到 ， 我 公司 的 许多 企业 客户 都 需要 用 表 
格 展示 密集 数据 。 由 于 对 使 用 表格 阅读 数据 非 第 熟悉 ， 所 以 他 们 充满 好 
和 奇 ， 很 想 知道 我 们 会 怎样 把 那些 表格 搬 到 移动 设备 上 。 和 现在 一 样 ， 我 
的 回答 是 “我 们 不 打算 那样 做 。 至 少 ， 我 们 不 会 不 子 说 明 移动 设备 本 
导 的 因素 给 设计 师 提 出 的 要 求 。 


在 移动 靖 显 示 表 格 数据 是 一 个 挑战 ， 同 时 也 起 一 个 机 会 。 挑 战 在 于 ， 要 
找到 在 小 屏 医 上 显示 数据 的 可 用 办 法 。 而 机 会 在 于 ， 我 们 可 以 更 严 可 地 
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审视 数据 ， 从 而 确定 用 户 真 正 需要 从 中 获得 的 是 什么 ， 然 后 研究 
出 创新 性 的 解决 方案 来 显示 数据 ， 这 样 的 表格 甚至 比 传统 表格 更 
有 用 。 


再 来 看 看 我 在 本 书 第 1 版 中 用 过 的 例子 一 一 一 张 记录 学 生 测 验 结 
果 的 长 表格 。 这 个 表格 用 图 表 的 形式 可 以 表现 出 更 好 的 效果 ， 用 
户 可 以 在 钟 形 曲线 图 的 分 数 区 间 上 点 击 查 看 该 区 间 内 全 部 学 生 的 


分 数 。 


图 3-1 


ee ae ae ee Test S 业 = 
重新 设计 的 表格 : 转换 成 一 张 交 — € 
互 式 图 表 也 许 更 有 用 


84 | 06/23/2011 
95 | 07/14/2011 
, 80 | 06/29/2011 | 


Bob 

Chris 

Daniel | 

‘Eliza | 64 | 08/10/2011 
"Gene | 92 |osrearzott_ 


67 | 07/14/2011 

79 | 07/14/2011 

83 | 06/23/2011 | 
Lois | 99 | 06/23/2011 | 


Lois 


Information about the chart and number] M 
tested... 


我 们 可 以 用 另 一 种 视图 来 展现 这 些 信息 ， 即 利用 具有 动态 搜索 功 
能 的 无 表 关 表格， 用户 可 以 快速 查看 特定 学 生 的 测验 结 琳 。 


图 3-2 
带 有 动态 搜索 的 无 表 头 表格 : 钟 
形 曲线 图 的 另 一 种 表现 形式 


Test Scores ill, = | | Test Scores lh, | = | 


Amy C 
Test date: 08/10/2011 77 of 100 
B- 


Bob 
Test date: 07/14/2011 84 of 100 


Damien A- 
Test date: 08/10/2011 94 of 100 


Damon C 
Test date: 07/14/2011 78 of 100 


Chris 
Test date: 06/23/2011 95 of 100 


Daniel C 
Test date: 08/01/2011 80 of 100 


Daniel 


C 
Test date: 06/23/2011 80 of 100 


Dann B+ 
Test date: 08/01/2011 93 of 100 


Eliza 
Test date: 08/01/2011 64 of 100 


Frank C+ || 


Daphane + 
Test date: 08/01/2011 99 of 100 


RAABAN ERR ERE ELAR ATT Ze all, TRITT] 
已 能 更 目 如 地 运用 它们 来 清晰 而 优雅 地 展示 表格 数据 了。 一 旦 确 
定 了 你 的 应 用 中 需要 显示 的 关键 数据 ， 就 要 了 解 下 面 这 些 表格 模 


式 ， 从 中 找到 灵感 。 


基本 表格 


基本 表格 模式 就 是 带 有 固定 列表 头 及 网 格 布局 的 标准 表格 。 设 置 
不 同 的 表格 行 颜色 (这 种 形式 也 称 为 “斑马 纹 ”)， 或 者 在 两 行 之 
间 用 细 线 分 隔 ， 都 能 提高 表格 的 可 读 性 。 
现在 善 志 省 略 垂直 网 格 线 以 减少 视觉 噪音 。 这 样 做 没有 问题 ， 但 
要 保证 列 对 齐 。 对 比 ESPN SportsCenter 应 用 和 Stock Trainer 表格 
的 可 旋 性 ， 束 能 看 出 列 对 齐 的 重要 性 。 


“syCck Trainer 


Ticker Price Cost Num Value 
STANDINGS 
Eauitv Name G\L $ CHG % CHG 
EZPW $16.90 $18.68 20 $338.00 
DIVISION EZCORP, Inc. $35.60 $1.78 9.53% 
AL EAST AMAT $17.60 $15.00 100 $1760.00 
Applied Materials, Inc. $260.00 $2.60 17.33% 
*-BOSTON z GOOG $876.39 $886.43 15 $13145.85 
TAMPA BAY Google Inc. $150.60 $10.04 1.13% 
PFE $28.88 $27.65 50 $1444.00 
NY YANKEES Pfizer, Inc. Comm $61.50 $1.23 4.45% 
BALTIMORE SSNLF 21210.00 $1140.00 2 $2600.00 
ig Electronics Co. Ltd. $320.00 $160.0 14.04% 
TORONTO 0 
i TGT $63.94 $69.38 15 $959.10 
AL CENTRAI W l is Target Corporatio $81.60 $5.44 7.84% 


X-DETROIT 


CLEVELAND 
KANSAS CITY 
MINNESOTA 
CHICAGO 

AL WEST 


X-OAKLAND 


TEXAS 


Find Stocks Top Movers My Account 


无 表 头 表格 


无 表 头 表格 的 特征 是 ， 用 较 宽 的 行 显示 某 一 对 象 的 多 个 变量 ， 且 
没有 列 标签 。 和 常见 的 做 法 是 突出 显示 行 标识 符 〈 信 息 的 关键 部 分 )。 
BillGuard 采用 了 图 标 ， 而 Gas Guru WER TER, WME ERTE 


体 来 突出 行 标识 和 从。 


[小 贴 士 ] 

不 要 使 用 深 色 的 网 格 线 。 
如 果 不 用 重 直 网 格 线 的 话 ， 
要 确保 列 对 齐 。 文字 左 对 
齐 ， 数 字 右 对 齐 。 如 果 要 
在 一 屏 内 显示 大 量 信息 ， 
请 考虑 采用 其 他 的 表格 
模式 ,。 


图 3-3 

dt x 版 ESPN Sports Center 和 
Stock Trainer: 如 果 去 掉 垂 直 网 
格 线 ， 就 要 保证 列 对 齐 
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图 3-4 No Service € 4:47 PM Time 


iOS J& BillGuard #4 Z = J& Gas < Al 
全 二 sa fe 
om dé n d Shell 0.33 mi 


801 Glenn Blvd, San Francisco, CA 4 3 9 E 


3 hours ago 
Audible (5) GOOD PRICE 
uMEOX 19 1O Chevron 0.34 mi 
: 1666 Gregory St, San Francisco CA 
Aq Credit Score Tracker... $7.99 3 hours ago IEEE 
"W' Latest Dec 11 i 
HughesNet (4) Chevron 0.38 mi 
R ughesNe 1299 Sunny St, San Francisco CA 
Po 2 d = 
"W Latest: Nov 20 $115.72 4 hours ago 
GOOD PRICE 
| [?] Google Imgflip Com (2) $9.95 Arco 


Q—J Latest: Oct 5 4 2 f, = jf share | 
10 


BEST PRICE 
Shell 0.65 mi 
1202 Tomorrow Ave, San Francisc... 
5 hours ago A 3 9 iC 
GOOD PRICE 
Union 76 0.84 mi 
503 S Terrific PI, San Francisco CA 
7 hours ago à 3 5 10 
RFST PRICE 


无 表 头 表格 非常 适合 用 来 显示 项 目 集 合 〈 比 如 存货 清单 、 菜 谱 、 
专辑 等 )， 也 很 适合 显示 搜索 结 来 。FlightBoard 显示 选 定 机 场 的 航 
班 信息 。 当 用 户 点 击 一 行 时 ， 航 班 详情 会 在 行内 显示 出 来 ， 而 不 
契 跳 转 到 新 的 页 面 。 


图 3-5 eecoo T-Mobile 会 3:41PM 


iOS 版 FlightBoard: 无 表 头 表格 ， AUS Departures 
- SS Austin-Bergstrom Int'l Airport 
点 击 行内 展开 详情 | 


T-Mobile 会 3:41PM 
AUS Departures 


Austin-Bergstrom Int'l Airport 


FLIGHT DEST GATE DEST TNI: 


Q Search Flights Q, Search Flights 


AUS Austin-Bergstrom Int'| Airport 


LAS McCarran Int'l Airport terminal 


j 


aircraft 


Boeing (Douglas) MD-80 


Last updated less than a minute ago 


无 表 头 表格 和 列表 一 样 ， 都 是 为 了 快速 浏览 并 执行 操作 。 对 章 、 
字体 和 颜色 这 些 视觉 设计 元 素 极为 重要 。 举 例 来 说 ，Realtor.com 
中 的 表格 就 比 Redfin 中 的 表格 更 易于 浏览 。 


[小 贴 士 ] 

ARRS ( 图 标 和 边框 等 
多 余 的 视觉 元 素 )， 并 设计 
精确 对 齐 的 表格 以 方便 浏 
览 。 在 不 那么 重要 的 细节 
上 使 用 较 小 和 颜色 较 浅 的 


‘realtor.com Ka 


165 Homes for Sale - Area in 17900-18084 Ranch Road 12, Wi... 


23 Marina Cir 


0.1 miles away 


| New | $6,500,000 
Winters Mill Pkwy, Wimberley, TX... eed ot: ced $176,900 字体 。 不 Xd M 最 重 要 的 
-- Bd -- SqFt X ix 
-- Ba 200 acres ww  ACTRIS, Century 21 Randall Morris e 息 Æ At 253 要 征 询 m P 


四 35 Champion Cir 


0.3 miles away 


的 意 蕊 JL, 然后 通过 测试 确 
定 该 项 设计 。 


* $3,900,000 

18059 Fm 1826 Unit A, Driftwood.... 
6 Bd 5,314 Sq Ft 

5 Ba 17.1 acres 


3120|1722 
Beds Baths Sq. Ft. $199,900 


ACTRIS, Gibson Properties 


2 CHAMPION Cir 
0.3 miles away 


3 2.5 1,990 
Beds Baths Sq.Ft. $245,000 


$3,800,000 


690 Autumn Ln, Dripping Springs... Y 
3 Bd 12,095 Sq Ft A TRIS, RE/MAX WIMBERLEY 
4Ba 17.4 acres 85 Woodcreek Dr 
0.4 miles away 
6 3.5 4,532 $397,500 


Beds Baths Sq. Ft. 


$2,900,000 

1224 River Mountain Rd, Wimberle... 
4 Bd 7,948 Sq Ft 

É f 5Ba 12.4 acres 


—— ACTRIS, Century 21 Randall Morris 


81 Woodcreek Dr 


0.4 miles away 


3.| 2:5. |2;738 
Beds Baths Sq.Ft. $274,500 图 3-6 


- — - — Morris dE 安 I-a 平 $e JE 对 比 Realtor.com 
0.5 miles away 和 Redfin : 清 晰 的 设 Wr fü EJ Xil 的 
排列 在 无 表 头 表格 中 极为 重要 


固定 列表 格 


对 较 大 的 表格 来 说 ， 固 定 列 表格 模式 或 许 是 一 个 可 行 的 解决 方案 
在 Roambi 和 Fidelity 的 例子 中 ， 当 用 户 不 是 垂直 滚动 屏幕 的 时 候 ， 
最 左 侧 的 列 固定 ， 其 他 列 可 左右 请 动 。 由 于 Roambi 的 超 局 平 化 设 
计 ， 千 看 之 下 要 分 辨 出 左 侧 为 固定 列 有 点 困难 ， 但 你 可 以 看 出 右 
边 有 更 多 的 信息 。Fidelity 设计 中 的 视觉 功能 可 见 性 能 让 我 们 知道 
首 列 是 固定 的 且 按 顺序 排列 。 


[小 贴 士 ] 

要 提供 视 沈 功能 可 见 性 ， 
好 让 用 户 知 道 通过 滑动 可 
以 显示 更 多 的 列 。 页 面 默 
认 显 示 最 重要 的 列 。 


图 3-7 
iOS 版 Roambi: 注意 最 左 侧 一 


Sample - Prescriber Info Sample - Prescriber Info 


Prextrol CM 


Prescriber Territory Specialty Prescriber 


列 是 固定 的 (用 细微 的 阴影 标识 
出 来 ) http://epub.ituring.com.cn/ 
Article/CheckIn/2434 


图 3-8 
iOS Jk Fidelity: 功能 可 见 性 显 
示 左 列 固定 ， 通 过 ; T 
£n 


ABBOTT, 
LAURIE 


ABISALIH, 
JOHN 


ABOULEISH, 
PATRICIA 


AL-ATRASH, 
MARGARET 


ALBERT, 
WILLIAM 


ALESSI, 
STEVEN 


ALEXANDER, 
STACY 


ANDERSON, 
PETER 


ANDRIANOV, 
JAN 


ANIEL, LESLEY 


AUGER, 
CLIFTON 


AXELSON, 
ROBERT 


BARTLEY, 
FI IZARFTH 


„Ul 


12BA1 NRP 
12BA1 CD 
12BA1 IM 
12BA1 IM 
12BA1 NRP 
12BA1 FP 
12BA1 ER 
12BA1 IM 
12BA1 IM 
12BA1 IM 
12BA1 FP 
12BA1 NRP 
12BA1 NRP 


"n (t 


LE 


LII 


PRES 


RO! 


MAD 


RU 


FARN 


WAT 


GU 


ABBOTT, 
LAURIE 


ABISALIH, 
JOHN 


ABOULEISH, 
PATRICIA 


AL-ATRASH, 
MARGARET 


ALBERT, 
WILLIAM 


ALESSI, 
STEVEN 


ALEXANDER, 
STACY 


ANDERSON, 
PETER 


ANDRIANOV, 
JAN 


ANIEL, LESLEY 


AUGER, 
CLIFTON 


AXELSON, 
ROBERT 


BARTLEY, 
FI IZARFTH 


Ul 


itam CM Roambitram 
vs PM CM vs P4 
32.796 0.996 
15.296 -6.896 
30.6% -17.3% 
10.4% 2.8% 
24.5% 16.5% 
15.2% -34.6% 
33.6% -17.3% 
- 110.1% 
16.1% 62.5% 
28.0% 33.6% 
12.6% -15.7% 


1t 


-1 


2:57 PM 


Watch List 


2:57 PM 


Watch List 


tbe DNS ts ee FAG 


概览 加 数据 型 表格 模式 的 特点 征 ， 表 格 内 容 的 摘要 显示 在 第 一 行 
这 种 模式 在 财务 类 型 的 应 用 中 十 分 普遍 ， 但 也 适用 
于 任何 其 他 应 用 ， 只 要 用 户 想 从 中 看 到 总 数 或 随时 间 变 化 的 趋势 。 


概 贤 可 以 古文 字形 式 的， 但 最 第 见 的 是 图 表 式 的 图 像 ， 请 看 下 面 


数据 的 上 方 。 


这 些 例子 。 


eeses AT&T F 7 


AUG 13 - SEP 11 


CASH 


Wells Fargo 
Wells Fargo 


INVESTMENT 


Fidelity 


134 PM o 70% mD 
ll ^ Net Worth: $2,399,551 


Wells Fargo 
Business Checking - Ending in 0749 


Wells Fargo 
Business Market Rate Savings - Ending 


[PT an 


$31.1K 


$19,801.97 


$570.14 


$500.00 
$956.66 
$2,000.78 


$1,248,110.02 


$61,357.11 


Madrigal Electromotive $63,901.00 
Walter White 401k 


February 13 
(AC NAAR Sea Lye] 


827 
1,864 
1,768 


y 15 


February 14 744 


1,682 


^ DECEMBER 2012 (9) 
@ Resting HR 0 61 L4 
G | Y 
a Ae enera r 0 60 
515 he: General 3 058 v 
1,182 M General 058 v 


1,222 Ap General : 055 v 


BillGuard 的 概览 图 表 是 交互 式 的 。 如 图 所 示 ， 点 击 “VS. AUG” ， 


会 显示 对 比 折线 图 ， 并 标示 出 支出 金 


额 的 变化 。 


[] 2 


4:15 PM 


SEPTEMBER 


Household 


The Home Depot, Lowe's Of... 


Uncategorized 


Trinity Hardwood Dist, Mcco... 


= Œ 


[ vs. AUG | 


$7,800 


$4,248.94 @ 


$3,296.90 


4:16 PM 4 EE 


SEPTEMBER Mma 


Household 
The Home Depot, Lowe's Of... $4,248.94 


Uncategorized 
Trinity Hardwood Dist, Mcco... $3,296.90 


^ Utilities & Telephone Utilities & Telephone 
e Hns Hughesnet.com $115.72 o9 Hns Hughesnet.com $115.72 
ÈE 1: 对 比 8 月 数据 。( 译 者 注 ) 


图 3-9 

iOS 版 Personal Capital #2 5 fix 
Runtastic Heart Rate: 概览 加 数 
据 型 表格 


图 3-10 
iOS 版 BillGuard: 交互 式 概览 图 
表 
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如 果 概 咒 用 人 饼 图 或 环形 图 表示 ， 且 图 表 和 图 例 占 用 了 整个 页 面 ， 
那么 采用 逐 级 深 入 (Drill Down) 模式 的 效果 可 能 会 更 好 ， 就 像 
Roambi 设计 的 那样 。 更 多 示例 请 参见 第 6 章 。 


[小 贴 士 ] 

将 概览 放 在 数据 行 区 块 上 
方 。 如 果 图 表 概 览 太 大 ， 
可 以 考虑 用 逐 级 深入 模式 
代替 。 若 想 了 解 有 效 的 图 
表 设 计 技 巧 ， 可 以 参见 第 
6 Fo 


Sample - Payer Mix 


《 Back Info 


Charges - Prior 


Sample - Payer Mix : 


Medicaid Salud 


Charges - 
Current 


Charges - P...» 


Current 


Payments - 
Prior 
Medicaid Salud - 
13.99% > 
图 3-11 $2,388,090.98 
iOS 版 Roambi: HA HAY # ben 
个 页 面 ， 所 以 逐 级 深入 模式 比 概 个 ^ 
m ['] © aul [E ©) 

览 加 数据 模式 效果 更 好 a a 


行 分 组 表格 


行 分 组 可 以 让 表格 数据 更 易 读 。 一 组 分 组 行 集 可 以 作为 节 区 头 部 ， 
比如 按 年 分 组 (例如 Zillow Mortgage Calculator) 或 按 类 别 分 组 
〈 例 如 Mint) 的 交易 记录 。 


eS e ear 5 TE a 


= Your payment $2,322/mo 《 é Accounts A C d xe TK Zillow Mortgage Calculator 
" /一 
AMORTIZATION FE 和 Mint: 行 分 组 表格 
。 Liege $784,123 
Total of Payments $835,986/30yrs 
Total of Principal + Interest $655,048/30yrs CASH 
Total Principal $372,000/30yrs | hecki 
Total Interest $283,048/30yrs feara E. * € 
Mo. Principal Interest Balance 
Year 2 Money Market $1,526 
University FCU (TX) | minute ago 
8 $552.46 $1,267.12 $361,309.56 
Regular S $5 
9 $554.39 $1,265.19 $360,755.17 (49. eeo 要 要 
10 $556.33 $1,263.24  $360,198.84 PRETEEN 
11 $558.28 $1,261.30 $359,640.55 CREDIT CARD -$18,231 [ 小 贴 士 ] 
12 $560.24 $1,259.34 $359,080.32 P'oblem signing in: HOT MO 
nea M » ` 如 sZ 一 
= Discover -$15,121 从 视 党 上 将 表格 的 汇总 行 
1 $562.20 $1,257.38 $358,518.12 SCOVer Var | minute ago 
Ze + yt 
和 其 他 行 区 别 开 来 。 一 般 
2 $564.17 $1,255.41 $357,953.95 CREDIT CARD -$107 
igni i 3 months ago = ` V : LJ, PE D d 
3 $566.14 $1,253.44 $357,387.81 Mm signing in! ii 而 言 ， 汇 总行 应 该 较 军 ， 
LOAN ` : E 
4 $568.13 $1,251.45 $356,819.68 AF A f Ø EX 浅 : 
s BE Bi Soin eee, Cons- New Auto -$9,915 


市 有 视觉 指示 器 的 表格 
带 有 视觉 指示 器 的 表格 模式 设计 中 ， 波 形 图 (Sparklines) 和 图 标 可 


以 提升 表格 的 信息 显示 将 有 末 。 但 一 定 要 注意 ， 不 要 用 没 用 的 图 标 堆 
满 表 格 ， 给 数据 的 显示 造成 干扰 ， 就 像 Sleep Charts 的 设计 那样 。 


中 和 一 一 3. Bine 
Bue Ac 安 卓 版 Sleep Charts: 不 要 在 表 
Ant; STATS NOISE ADD-O 格 里 填 满 不 Noy 要 的 图 标 


Pattern 


Last ISS 


Duration 
Deficit 


8:10 


10/06 4:20 + 10:10 6: 50) 


ETT TTE 


09/06 2:23 + 11:48 (9:05) nea iene 


07/06 4:25 + 11:53 (7:12) 


AA aA ^ [^N V. anta NALOR LI-AN 


416 records Detailed statistics 


表格 | 95 


另 一 方面 ，Roambi Sales Reports 应 用 的 视觉 设计 突出 了 数据 ， 而 
不 是 使 之 模糊 不 清 。 关 于 在 移动 应 用 中 使 用 波形 图 的 更 多 信息 ， 
请 参见 第 6 草 。 


& 3-14 
iOS Ji moambi Sales Mis A, Sample - Sales by Store Sample - Sales by Store 
括 波 形 图 在 内 的 设 计 元 素 突 出 7 Y Sales @ d: vs Store Visitors ®© 
数据 信息 
All 177 > All 177 > 
Corner Type 16 > Corner Type 16 > 
(v)  s69.8k "MN. $67.3K 48.2K amm Bee 53.7K 
Inside Mall 33 » Inside Mall 33 > 
(v)  sz64K ~——“\____-~,, $684K 237k MEBBENBEBENENB 23sk 
Mini Mall 20 > Mini Mall 20 > 
(€) $58.2k "f. A $58.3K 77.4K BBEREEBBEEBBEBBNH -K 
Movie Center 18 > Movie Center 18 > 
(€) saz -人 MA 全 $32K 479K “人 人 一、 一 一 个 一。 50K 
Plaza 36 > Plaza 36 > 
(v) suk Pm A $154k ix MEBBEBEBBEBBB 145k 
Premium 20 > Premium 20 > 
(€) sik & LN m $110K 54.8K mm NÉ wa 4.3K 
Super Store 12 > Super Store 12 > 
„Ul ü CL) © „Ul 外 LT) © 
Sample - Sales by Store Sample - Sales by Store 
[Es st by Product O Net gest ®© 
All 177 > All 177 > 
Corner Type 16 > Corner Type 16 5» 
© wx č NB 
Inside Mall 33 » Inside Mall 33 > 
FE 一 () sossk MEME = $286K 
Mini Mall 20 > Mini Mall 20 > 
—— (0) $57K m= o5 
Movie Center 18 > | Movie Center 18 > 
— (A) sw —— 0 0 NB mmm v7 
Plaza 36 > Plaza 36 > 
(*) $146k — a NN  8147K 
Premium 205» Premium 20 > 
(4) $54K m EE —— Es $56.7k 
Super Store 12 > Super Store 12 > 
aul [t as © „Ul Ü (J © 


Bee PE AT LUCR OT BUB A ta a PESRUS Uc. oe fH 
不 必要 的 图 标 。 比 较 一 下 最 近 的 两 个 iOS 版 本 的 PayPal。 较 新 版 
AY iOS 7 设计 去 掉 了 过 多 的 图 标 ， 增 加 了 更 多 的 空间 来 展示 交易 


[小 贴 士 ] 


只 有 当 视 觉 指示 器 可 以 突 


» 
日 ,Cho 


出 表格 数据 时 ， 才 可 以 使 
Ho 否则， 应 该 避免 使 用 。 


[2 T-Mobile + 11:28 PM No Service 3 4:52 PM a / 
Recent Activity Activity Shop Recent Activity View All 
This Week 
@ | JCPenney Corporation, Inc. - $154.04 Melissa Goyette - $24.35 
7— | Order Oct 21, 2013 Completed Nov 25, 2013 
@ | Credit Card - $75.78 
| Transfer Oct 20, 2013 MBK SALES - $6.88 
Completed Nov 22, 2013 
@ | Zappos.com + $75.78 
| Refund Oct 20, 2013 n 
Rollbackdeal.com LLC - $64.95 
Last Week Completed Nov 22, 2013 
© PROACTIV - $25.94 
Payment Oct 14, 2013 Tiffany Telles - $13.45 
o9 Bank Account 十 $25.94 Completed Nov 22, 2013 
| Transfer Oct 14, 2013 
@ | Angie's List Inc - $1.75 The Home Depot - $267.66 
Ne Payment Oct 14, 2013 Completed Nov 19, 2013 
Bank Account + $1.75 
9 Transfer Oct 14, 2013 JCPenney Corporation, Inc. + $135.02 
Completed Nov 17, 2013 
© PROACTIV - $25.94 
~ | Authorization Oct 14, 2013 
JCPenney Corporation, Inc. + $19.02 
© Christopher Reed - $8.99 Completed Nov 17, 2013 图 3-15 
| Payment Oct 13, 2013 . . ‘ 
Mt a ance ETT — -= iOS 6 Jk ® iOS 7 }k PayPal: 新 
W c 8 2 版 的 设计 丢弃 了 图 标 ， 增 强 了 可 
Activity Transfer Wallet Settings ix 性 


可 编辑 表格 

在 移动 界面 设计 中 ， 可 编辑 表格 几乎 为 微软 Office、 谷 歌 云 端 硬盘 

(Google Drive) FHER Numbers 等 电子 表格 应 用 所 独 有 。 许 多 网 

页 端 可 编辑 表格 的 设计 规范 也 适用 于 移动 端 : 

。 清晰 地 指示 出 选中 的 单元 格 和 行 。 

。 如 果 单 元 格 有 特定 的 格式 ， 就 要 提供 适当 的 编辑 器 (如 选择 器 、 
下 拉 菜 单 、 颜 色 选 择 器 、 日 期 选择 器 等 )。 

。 除非 编辑 后 产生 错误 提示 ， 否 则 没有 必要 为 每 项 编辑 都 提供 人 确认 
有 反馈， 只 需 在 保存 时 要 求 用 户 确认 即 可 。 


在 Windows Phone 版 的 Office 中 ， 单 击 单 元 格 会 显示 单元 格 菜 单 
选项 。 点 击 功 能 图 标 (左上 角 的 fx 按钮 )， 以 调 出 功能 菜单 。 


表格 


Bae —. — (1 


Winns eoe f Oss: Jo [|] [5p 
Dx 按钮 调 出 功能 菜单 A B C D A z C D 


task  [y]person [z]duedatq] 


1 task person — duedate 1 
27 | 2 
3 3 
4 4 
5 5 E 
6 6 z 
7 7 
OO + 
sheets autosum find sort 10 
E sum 1000 
format cell... 
[小 贴 士 ] average 250 
. ES : comment 
设计 可 编辑 表格 时 ， 可 适 max 400 
当地 参照 网 页 端 和 桌面 端 oe " T 
设计 的 最 佳 实践 ， 但 是 如 redo 
sn gen ands count < 
果 要 进行 批量 数据 输入 ， share 


或 者 可 能 需要 大 量 的 编辑 
工作 ， 就 要 避免 使 用 可 编 
辑 表 格 。 


然而 ， 与 桌面 应 用 不 同 的 是 ， 移 动 端的 可 编辑 表格 不 适合 进行 大 
量 的 数据 输入 操作 ， 这 主要 十 因为 移动 设备 的 键盘 不 支持 屏幕 导 
航 ， 尤 其 是 不 能 使 用 Tab 键 在 单元 格 之 间 切 换 。 


X BB] Silvercar Project Information © 4 v^ ^w Cels Fonts B 


A G H A | G H 
1 1 
2 5 6 2 5 6 
3 August 20 August 27 3 August 20 August 27 
scope check-in scope check-in 
4 previous weeks are Marie working out of town A previous weeks are Marie working out of town 
hidden DEV INVOLVED hidden DEV INVOLVED 
s 5 PEE 
6 6 
rd 了 
8 8 
9 9 
]0 10 
11 11 
12 12 
13 13 
14 14 
15 clickable prototype 15 clickable prototype 
图 3-17 
? 从 Bp — Ml ` 
安 卓 版 谷歌 云端 硬盘 : 选择 一 人 in a 
N 一 E] PS — 
元 Km dm S LAN D 
m fé 时 , 5 5 Ls i it À timeline.. 4 / timeline. > 


HE 


No Service F 


Done 


5:26 PM 


Table Options 


图 3-18 


iOS 版 Numbers: 对 数据 的 输入 
和 格式 化 分 别 采 用 不 同 的 视图 和 


编辑 模式 


表格 


op 4 


ER. HERPAU UIS 


。 搜索 模式 
史 式 搜索 (Implicit Search) ， 显 式 搜 索 (Explicit Search)， 自 动 完 
成 搜索 (Auto-Complete), PEE Ye Hil AY #2 A (Scoped Search), z) 
态 搜索 (Dynamic Search) ， 保 存 的 搜索 (Saved), Heit 2 Rid ae 
(Recent) 和 热门 搜索 (Popular) ， 搜 索 表 单 (Search Form), ， 搜 索 结 
果 (Search Results) 


。 排序 模式 
单 页 排序 (Onscreen Sort)、 排 序 浮 层 (Sort Overlay)、 排 序 表单 (Sort 
Form) 

。 筛选 模式 
PA. Til fifi Ve (Onscreen Filter), imi xir (Filter Overlay). ffi Zé B. 
(Filter Form). fathi (Filter Drawer), #7 4- 24H five (Gesture- 


100 


Based Filter) 


你 最 近 看 过 AutoDirect, Greensheet 或 类 似 的 免费 广告 册 吗 ? 你 会 
看 到 一 页 页 的 广告 分 放 在 众多 不 同 的 类 别 下 面 ， 比 如 卡车 、 小 汽 
车 和 电器 。 要 想 查 看 有 没有 感 兴趣 的 广告 ， 你 得 把 册子 从 头 到 尾 
翻 一 遍 。 这 应 该 会 使 你 对 将 要 讲 到 的 三 种 基本 在 线 工 具 产 生 全 新 
的 认识 一 一 搜索 、 排 序 和 般 选 。 


在 数字 领域 ， 我 们 将 搜索 、 排 序 和 筛选 视 为 理所当然 的 工具 。 但 
是 要 将 这 三 者 在 移动 应 用 中 很 好 地 实现 ， 还 是 稍 有 差别 。 本 章 将 
探讨 十 几 种 不 同 的 实现 方法 。 


搜索 模式 


《触动 人 心 : 设计 优秀 的 iPhone 应 用 》(Tapworthy: Designing 
Great iPhone Apps) 一 书 的 作者 ，Josh Clark 说 过 ， 在 触 屏 设备 
的 界面 设计 中 ,“ 按 钮 只 是 一 个 变通 手段  。 这 是 因为 ， 触 摸 让 我 
们 能 更 直接 地 与 内 容 进行 交互 ， 比 如 下 拉 刷 新 和 双 指 缩放 。 那 
么 ， 在 使 用 肢体 动作 更 直观 的 情况 下 ， 为 什么 要 设计 一 个 抽象 的 
按钮 呢 ? 


我 们 应 该 以 同样 的 方式 去 思 竹 移动 搜索 。 随 着 我 们 的 应 用 越 来 越 
能 “感知 ”个体 的 需求 ， 它 们 也 在 减少 我 们 必须 运用 显 式 搜索 碍 
找 相 关 信 息 的 情况 。 

比如 说 ， 人 谷歌 “知道 ”我 要 在 市 区 参加 一 个 会 议 ， 写 会 各 诉 我 应 
该 在 什么 时 间 出 发 ， 如 何 到 达 。 它 还 知道 ， 我 经 常 在 周 六 禹 护 子 
们 去 看 电影 ， 所 以 它 “ 推 荐 ”了 一 些 正在 我 们 最 喜欢 的 剧院 上 映 
的 演出 。 当 我 在 有 我 喜欢 的 儿 家 店铺 的 商城 附近 时 ，RetailMeNot 
会 为 我 显示 出 这 些 店铺 此 时 的 所 有 打折 信息 。 

这 种 新 兴 的 模式 被 称 为 隐 式 搜索 。 我 们 会 进一步 探索 这 种 模式 ， 
重新 审视 本 书 上 一 版 中 谈 到 的 传统 搜索 、 排 序 和 筛选 技术 。 

在 这 一 市 中 ， 我 们 将 讨论 针对 移动 应 用 的 搜索 模式 ， 其 中 包括 隐 
式 搜索 ， 显 式 搜索 ， 自 动 完成 搜索 ， 限 定 冰 围 的 搜索 ， 动 态 搜 索 ， 
保存 的 搜索 、 了 其 近 搜索 记录 和 热门 搜索 ， 搜 索 表 单 以 及 搜索 结 林 。 
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图 4-2 


Google Now: 把 隐 式 搜索 提升 到 
了 新 的 层次 


102 


隐 式 搜索 


在 与 一 位 新 客户 会 面 的 前 一 天 上 晚上， 我 在 电脑 上 通过 谷歌 搜索 了 
这 位 客户 的 地 址 。 第 二 天 早上 临 走 前 ， 我 打开 新 版 谷歌 地 图 ， 输 
入 地 址 的 第 一 个 字母 ， 地 图 马上 就 知道 我 要 去 哪儿 。 


One map, many devices. 


Access one map across your devices with all your favorite places. 
Sign in with your Google account. 


在 这 个 新 版 应 用 中 ， 谷 歌 跨 平 台 同 步 了 我 的 信息 ， 并 用 隐 式 搜 
索 的 方式 显示 出 来 。 哇 ， 太 有 用 了 。 我 当时 想 。 但 在 那 之 后 ， 
Google Now 又 把 隐 式 搜索 提升 到 了 一 个 新 的 层次 ， 它 在 地 图 上 标 
出 了 我 的 下 一 个 与 会 地 点 、 es 以 及 到 达 的 途径 。 
我 现在 已 经 基本 上 不 需要 在 谷歌 地 图 里 进行 精确 的 搜索 了 。 


neri wm Brao o "m : .— San Francisco 55 minutes to work 
4 ca Light traffic on 101 
^ TM SS E re (8 ()* 
. TUE THU 
o Get directions / 33min e : je 
72° 82° 60° 84° 
> Alternate route / 45min vis 280 
La Gavroche 
43 Upper Brook Street, London, WiK 7QR 
Pacifica Airlines :  TheC onnaught Hotel : Reservation in 1 hour 
flight 2340 Sr ane — 
WIK 2Al ngo 
Status: Delayed / Wed, June 27, 2012 Check-out in 1 hou 
SFO 7:09pm sched. 5 
TPE 10:32pm 


o Get directions 


Navigate to SFO / 34 min 
A " o Get directions iub View email 


在 使 用 RetailMeNot 应 用 时 ， 我 也 经 历 了 相似 的 愉快 体验 : 我 开 
车 外 出 办 事 的 时 候 ， 突 然 听 到 包 里 发 出 了 “ 味 味 ”一 声响。 我 很 
纳 问 ， 我 的 手机 怎么 会 发 出 收银 机 似 的 声音 ， 这 时 我 看 到 了 一 条 
RetailMeNot 的 提醒 一 一 附近 商城 里 我 最 喜欢 的 几 家 店铺 正在 进行 
大 力度 促销 。 当 我 走 进 一 家 商铺 时 ，RetailMeNot 应 用 又 会 显示 出 
能 在 购物 时 使 用 的 优惠 券 。 要 知道 ， 是 这 条 与 我 相关 的 信息 找到 
了 我 ， 而 不 需要 我 去 搜索 它 。 


«ones Pals 
TOP2 IN-STORE OFFERS 


20% Off Everything When You 
Shop In Store 


Staff Pick Exp. 10/14/2013 Save In-Store Offers Online Offers 


$10 Off Women's Rock & Republic | 20% Off Everything When You 
Jeans Shop In Store 


NEW! Exp. 10/16/2013 Staff Pick Exp. 10/14/2013 


View All 4 Offers 


$10 Off Women's Rock & Republic 
Jeans 
Mattress Firm NEW! Exp. 10/16/2013 
TOP IN-STORE OFFER 


.. 20% Off Storewide 


$40 Off $5004 
10096 Success Rate A : E 4 


Add Favorite Store Find Locations 


对 我 来 说 ， 这 种 方式 比 先 通过 精确 搜索 找到 一 家 商店 ， 然 后 再 查 
看 该 商店 是 否 提供 任何 打折 信息 要 高 效 得 多 。 这 对 RetailMeNot 公 
司 来 说 当然 也 是 件 好 事 ， 自 从 推出 地 理 围 栏 (Geofencing) “功能 
后 ， 其 移动 应 用 的 活跃 量 增长 了 四 倍 之 多 。 


隐 式 搜索 的 例子 还 有 很 多 。 比 如 ， 如 果 在 Zillow 和 其 他 类 似 的 房 
产 应 用 中 开局 了 基于 地 理 位 置 的 服务 ， 应 用 就 会 立即 显示 所 在 区 
域内 的 房产 销售 和 租赁 的 全 部 信息 。 交 友 应 用 Badoo 使 用 了 同样 
的 技术 来 显示 附近 正在 找 朋友 的 人 。 


TE 1: 地 理 围栏 是 LBS 的 一 种 新 应 用 ， 就 是 用 一 个 虚拟 的 栅栏 围 出 一 个 虚拟 地 
理 边界 。 当 手机 进入 、 离 开 茶 个 特定 地 理 区 域 ， 或 在 该 区 域内 活动 时 ， 
它 可 以 自动 接收 通知 。( 译 者 注 ) 


图 4-3 
iOS 版 RetailMeNot: 基于 附近 
位 置 的 隐 式 搜索 


[小 贴 士 ] 
在 选择 其 他 搜索 模式 前 先 
考虑 隐 式 搜索 的 可 能 性 。 
这 种 模式 可 以 创造 愉悦 的 
用 户 体 验 。 


搜索 、 排 序 和 篇 选 | 103 


图 4-4 
iOS 版 Zillow 和 和 安 卓 版 Badoo: 


基于 地 理 位 置 的 隐 式 搜索 


图 4-5 
安 卓 版 Foodspotting 和 Windows 
Phone 版 Hungry Now: 更 多 基 


[aa] Saving screenshot 


People nearby 


I Little Miss Samud PACH. 
Saas ove, Add me ve [^9 
ub uum 05 e here! À - " ^ 
inde D eocf I p - m E. 
i k 
210K .48(@ 600K : 
KA 345K Wimberley 
229K 
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o 4 
Woodcreek 
® e? e 
435K (eu, Pede 
o Fischer 10M 
749K 16010 
: @ 250K 
79. © 
x) Oe 
oA ete San Ma 
e 995. 14, 
TAY yore ^ue 
50K "e: 135K e © 
EPn @90 SA 
275K 96. 
4e 
(e io 
HORS fe = 
ud ee no 
“18K 
Draw Nearby Save 


F 


Foodspotting 和 Hungry Now 在 它们 各 上 自 的 着 陆 页 上 突出 了 “ 查 
看 附近 的 餐厅 ”这 一 功能 。Foodspotting 使 用 轮 播 图 显示 每 个 餐 


厅 的 图 片 和 详情 ， 鼓 励 用 户 根据 自己 的 就 餐 体验 为 餐厅 打分 ， 而 
Hungry Now 则 在 一 张 地 图 上 显示 出 附近 的 餐厅 。 


器 Foodspotting Q 


Leande 


Near 1-17 Town House Cir e | 
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像 Wikitude 和 Layar 这 样 的 应 用 结合 使 用 了 移动 设备 的 地 理 位 置 
和 加 速 计 ， 为 用 户 实现 了 “增强 现实 ”(Augmented Reality) 功能 ， 
日 无 需 输 入 搜索 词 。 


Bring print to life 
Scan items with the Layar logo 
such as magazines, newspapers, 
movie posters and more 


The new Mercedes Benz E-Class- 


i 
0) 


f 
(©) Watch the trailer f | 


"nw 4 | 


rcm, 
TAE 


== ( A) Mercedes Bend 


sven 


> Buy Tickets 
yw 


显 式 搜索 

虽然 隐 式 搜索 可 以 创造 出 更 丰富 的 用 户 体验 ， 但 显 式 搜索 模式 仍 
然 有 其 用 武之 地 。 顾 名 思 义 ， 显 式 搜索 就 是 通过 显 式 的 用 户 操作 
实现 搜索 并 获得 结果 。 
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图 4-6 
强 现实 的 隐 式 搜索 
x : — a 
p in 
“ Element of Crime 
420 m 0o —— 
Locale ag ee NE um 

图 4-7 


Wikitude World Browser: 使 用 


安 卓 版 Layar: 另 一 种 使 用 增强 
现实 实现 隐 式 搜索 的 方法 
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图 4-8 


Windows Phone 版 和 安 卓 版 eBay 


Windows Phone 8 版 的 eBay 应 用 就 是 个 简单 的 例子 。 在 搜索 框 


内 输入 检索 词 ， 然 后 点 击 搜索 图 标 ， 或 者 前 击 键 盘 上 的 回 车 键 查 
看 搜索 结果 。 但 是 安 卓 版 的 eBay 只 是 增加 了 几 个 小 功能 ， 就 比 
Windows Phone 8 版 有 用 得 多 。 


gebe Q, Search eBay 4 
| Scan ii 
motocr iphone 
Recent 
i 
ro a Saved searches > 
Å Reminders a 


lel ll dvo] 


ell llbll- 


‘tf 0o le ta lal i lm NE 


在 安 日 应 用 中 ， 点 击 搜索 框 会 出 现 几 个 选项 扫描 商品 而 不 用 输 
入 商品 名 ， 再 次 使 用 最 近 一 次 搜索 ， 或 是 访问 你 存 的 搜索 。 只 
用 户 开 始 输入 ， 应 用 就 会 给 出 与 输入 文字 匹配 的 搜索 建议 。 以 这 
种 方式 取 小 化 输入 需求 ， 可 以 提高 搜索 效率 ， 并 且 降 低 出 错 的 几 
也 可 参见 接 下 来 的 模式 一 自 动 完成 搜索 。 


TERA EK eBay 的 搜索 设计 那样 ， 显 云 搜索 不 应 该 仅 限 于 文字 输入 。 
亚马逊 应 用 和 RedLaser 应 用 就 为 快速 查找 店内 商品 提供 了 图 片 和 条 
形 码 扫描 的 功能 。 这 些 对 移动 设备 友好 的 搜索 功能 促进 了 展厅 现象 
(Showrooming Phenomenon, http://en.wikipedia.org/wiki/Showrooming) ! 


的 发 展 ， 该 现象 在 近 几 年 已 改变 了 零售 业 的 发 展 势 态 。 


TE 1: 展厅 现象 指 先 在 商场 看 好 商品 进行 体验 ， 然 后 上 网 搜索 并 以 低 价 购买 的 


现象 。( 译 者 注 ) 


LEPFLLENXEEXETLILS uh 
Sear 


Apple® - Wireless 


| Keyboard 
Scan It ooi 4,3 (3) 


Online $48.00 / Local $69.99 
四 | Snap It ONLINE LOCAL DETAILS REVIEWS 


ONLINE RESULTS 


Best Buy $69.99 


Google SEARCH RESULTS 


eBay $48.00 
1 2 3 4 5 6 7 2 8 9 0 
CI) IUU KEN M AES AYA REN AIN KON IE eBay - lgeoo $49.99 
! e $ 7 d. ( j 
SECTOR (a My UN UE! 
Discount Shockwave $53.37 
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语音 搜索 也 同样 有 用 ， 但 依赖 于 高 质量 的 语音 识别 程序 。 我 们 都 
听 过 Siri 严重 误解 用 户 问 题 的 搞笑 故事 〈 请 看 来 自 WhySiriWhy. 
com 网 站 的 截图 ) ， 但 语音 搜索 已 经 取得 了 很 大 进展 ， 我 期 待 它 能 


够 得 到 持续 改进 。 


s... AT&T 3G 4:39 PM f 100% = 1:44 PM = 


Details | Done | 


Get ketchup cake Mexican 
prostate 


How about a web search for 
‘What is the Octomom beaver 
maximizing gas mileage’? 


Search the web 
Remind Me Thu, 1/26/12 1:44 PM 


Due Thu, 1/26/12 1:44 PM 


Repeat Never 


Show More... 


WhuSiriWhu.com 
\ = 


还 有 一 种 显 式 搜索 是 通过 直接 操纵 (Direct Manipulation) “完成 的 。 
Trulia 和 Soundwave 都 提供 了 用 手势 在 地 图 上 划 出 搜索 学 围 的 
功能 。 


TE 1: 直接 操纵 指 用 光 笔 、 鼠 标 、 触 摸 屏 或 数据 手套 等 坐标 指点 设备 ， 直 接 从 
屏幕 上 获取 形象 化 命令 与 数据 的 过 程 。( 译 者 注 ) 


图 4-9 
安 卓 版 亚 蕊 还 和 RedLaser: 通过 
扫描 条 形 码 进 行 显 式 搜索 


图 4-10 
WhySiriWhy.com: 一 个 专门 发 
现 语音 搜索 错误 的 网 站 
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图 4-11 
安 草 版 Tulia 和 iOS 版 Soundwave: 


使 用 手势 划 出 搜索 边界 
po, a 
e List 

还 有 一 种 新 兴 的 显 式 搜索 模式 是 “ 模 态 搜索 ”(Modal Search), LJ 

Target 为 例 ， 其 搜索 框 位 于 导航 抽 居 内 ， 但 是 只 要 点 击 搜 索 框 ， 

“搜索 模式 ”就 会 显示 为 一 个 带 有 弹出 键盘 的 完整 的 搜索 页 。 

图 4-1 2 a T-Mobile = 4:42 PM 4 iy 

iOS 版 Target: 点 击 搜索 框 打 JT (Q search target.com —— ] cancel 
一 个 新 的 搜索 页 面 


Products lI scan barcode 
Shopping List 
Weekly Ads 
Deals & Coupons 
Stores 


TargetLists 


Registries 


My Accounts 


Pharmacy 


TripAdvisor 和 RetailMeNot 使 用 了 同样 的 搜索 模式 ， 但 它们 的 搜索 
框 位 于 首页 ， 而 没有 放 在 导航 抽 层 里 。 


0000 T-Mobile = 3:57 PM 7} = 


G9 tripadvisor’ 
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C3 Near me now 
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© Attractions 


(A) Flights 
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Your Favorite Stores 
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Cancel 
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uz Ixicivia]N] v 


Search 


模 态 搜索 的 主要 好 处 在 于 用 单个 搜索 页 面 增加 了 搜索 空 
为 那些 最 终 不 打算 搜索 的 用 户 提供 一 个 返回 的 途径 (比如 “取消 ” 


TEL). 


i|], WE, 


图 4-13 


iOS 版 TripAdvisor: 模 态 搜索 页 
面 从 右 向 左 滑 出 
图 4-14 
iOS 版 RetailMeNot: 模 态 搜索 
页 面 从 下 向 上 滑 出 
[小 贴 士 ] 
要 提供 一 个 “清除 ” 
和 取消 "M: E RAI 
使 用 反馈 来 表示 系 ne 


进行 搜索 操作 (参见 第 8 
= ), 
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目 动 完成 搜索 

现在 移动 设计 已 进入 成 熟人 阶段， 目 动 完成 功能 应 该 成 为 亚 式 搜索 
模式 的 标 配 。 虽 然 这 些 设计 模式 从 2004 年 左右 开始 就 已 经 出 现在 
网 页 端 ， 果 面 端 还 要 更 久 一 些 ， 但 在 我 研究 过 的 Windows Phone 8 
平台 的 应 用 中 ， 只 有 不 到 10% 的 应 用 拥有 这 项 功能 ， 这 着 实 让 我 
吃 了 一 惊 。 更 吓人 的 是 ， 其 至 连 Windows Phone 版 的 Dictionary. 
com 都 没有 提供 自动 完成 功能 ， 还 有 谁 比 词典 应 用 的 用 户 更 需 


这 项 功能 呢 ? 
图 4-15 E a lo Service = T 4 
. » ictionary.com 
Windows Phone }i f iOS 版 Dicti- LR AY "E ad 3 
onary.com: EH zl a 成 应 该 成 A Aid orthogonal | v ent projection 
、 、 = orthogonal projections 
X 搜 EA T 式 的 标 配 自 Q Im e NY orthogonal trajectories ih 


orthogonal trajectory 


orthogonalise 


:三 Recent 


orthogonalised 


orthogonalises 


to group 


eum ked Era ete Eyi kun D KON NB 


asi ppp pr 
AISIDIFIGIHIJIK[L 


nes © 7X CVBNM S 


&123 , space B Ec space Eg 
应 该 配置 自动 完成 功能 ， 这 样 当 用 户 输 入 文字 时 ， 就 会 出 现 一 组 
可 能 的 结果 。 当 用 户 继 续 输 入 文字 时 ， 搜 索 结 果 也 相应 地 减少 。 
扩 击 任何 一 项 结 霖 束 会 触发 搜索 。 扩 击 页 面 上 或 键盘 上 的 按钮 ， 
也 应 该 触发 对 当前 高 腕 选项 的 搜索 。 


e LC RES 
Ut 3 JR Newegg 和 Netflix: 自动 LA x. 


l id 32 Ite] ipad 1 b 
完 成 功 能 可 以 为 触 发 搜 索 提 供 多 = ipad 2 64gb | e Sesame Street 
E didi | » Session 9 


ipad keyboard 


| ipad 2 16gb Sesame Street: Classics 


pad w Sesh Sanghat 
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tzgxicvibnm Eelt mB le km is ln ln a 
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123 j 
Sym 8 


= 


110 | 第 4 章 


理想 情况 下 ， 自 动 完 成 搜索 的 结果 会 立即 显示 出 来 ， 但 应 当 使 用 
进程 指示 器 (“搜索 中 …… ”) 给 予 用 户 反 馈 。Fidelity 应 用 就 在 最 
终 搜索 结果 页 面 上 显示 反馈 。 


T 3 12:31PM 


T-Mobile + 12:32 PM 


BUFOX BUFFALO EMERGING OP... 
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KHL Target 应 用 设计 了 一 种 增强 型 的 目 动 完成 搜索 ， 


它 将 每 一 项 

提示 有 可 能 所 属 的 类 别 都 显示 出 来 。 这 样 的 设计 令 用 户 可 以 更 方便 

tn AL. Songza 也 采用 了 显示 群 组 名 的 增 
哩 型 目 动 完成 搜索 。 
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图 4-17 
iOS 版 Fidelity 在 搜索 框 下 方 提 
供 自 动 完 成 的 进程 反馈 


[小 贴 士 ] 
如 果 在 显示 自动 完成 搜索 
的 结果 前 存在 延迟 ， 那 么 
可 以 显示 一 个 加 载 指 示 器 。 
可 以 考虑 将 提示 进行 分 组 ， 
以 提高 搜索 效率 。 

图 4-18 


ZEH Target 和 Songza: 强 型 
自动 完成 搜索 
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iOS 版 Audible 的 动态 


己 输 入 时 缩减 搜索 


图 4-19 
搜索 在 用 


结果 的 范围 


图 4-20 


iOS 版 Contacts 中 的 ne 搜索 人 允 


许 用 户 快 速 


OX E E E 


xt ost 


动态 搜索 


A E 


日 的 搜索 框 下 会 显 


动态 地 对 结 casa. 
AL AB CH] S A P HB EE LZRTE UG RUE. 


只 有 与 输入 名 称 匹 配 的 


街 选 。 在 动态 搜索 模式 下 ， 
全 部 可 能 的 分 类 结果 ， 而 输入 搜索 字 "A 
缩减 列表 的 范围 。 以 Audible 为 例 ， 你 
当 我 开始 输入 的 时 候 ， 
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Q Jer @ Cancel Q Jennifer @ Cancel iOS 版 Contacts 中 的 动态 太 搜 索 人 允 
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的 数据 集 ， 比 如 地 址 簿 或 
是 个 人 媒体 库 ， 但 在 搜索 
零售 商 存货 清单 这 样 的 海 
量 数据 时 ， 则 不 应 该 采用 
这 种 模式 。 
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限定 范围 的 搜索 


有 些 时 候 ， 如 有 果 让 用 户 在 开始 搜索 前 先 设 定好 搜索 范围 ， 他 们 就 
能 更 便捷 地 得 到 搜索 结果 。Windows Phone 8 版 的 谷歌 应 用 提供 了 
一 个 可 以 选择 搜索 类 别 的 来 单 ， 而 安里 版 的 Google Play Store 则 在 
搜索 框 下 面 放置 了 一 个 下 拉 球 单 探 件 。 


21:27 图 4-21 
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[小 贴 士 ] 

为 数据 集 提供 合理 的 范围 
选项 ， 三 到 五 个 就 够 了 。 如 
果 要 提供 高 级 搜索 ， 可 以 考 
虑 设计 成 一 个 搜索 表单 。 


图 4-22 
iOS 版 iTunes 和 Amazon Cloud 
Player: 两 种 缩小 搜索 范围 的 设计 


[小 贴 士 ] 

为 便于 日 后 使 用 ， 通 常 需 
要 增加 一 个 步骤 来 为 保存 
的 搜索 命名 ， 而 最 近 搜 索 
记录 是 自动 保存 并 自动 显 
示 的 。 可 以 想 想 哪 种 模式 
能 更 好 地 满足 用 户 的 需求 。 


在 iOS 平台 上 ， 和 党 第 用 分 段 控件 (Segmented Control) 实现 限定 范 
围 的 搜索 ， 比 如 iTunes， 但 也 可 以 选用 其 他 的 UI 控件 ， 比 如 滚动 
选项 卡 或 胶 早 导航 栏 (Pill Bar), 
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保存 的 搜索 、 最 近 搜 索 记录 和 热门 搜索 

优秀 的 移动 应 用 界面 设计 都 会 遵循 基本 的 可 用 性 准则 ， 尊 重用 户 
付出 的 努力 。 保 存 的 搜索 、 最 近 搜索 记录 和 热门 搜索 就 是 通过 先 
择 先前 的 搜索 记录 ， 实 现 搜索 流程 的 简化 ， 让 用 户 不 必 重 复 输 入 


相同 的 关键 词 或 搜索 条 件 。 


@0000 T-Mobile > 2:11 PM $ EN) = e000 T-Mobile = 2:16 PM 1 } 
QlSearch eBay Cancel dei mi homesnap (©) 
Wi Scan Q bddress, city, ‘hood or zip Cancel 
ee 


ee Categories 
4 Current Location 


ye Saved Searches 
ẹ My Saved Searches 


Recent Searches e Search listings and save your searches for later. 
Previous Searches 
rint curtains ; 
p TX 78734 (Austin, TX) 


bluetooth headset Zip Code 


78751 (Austin, TX) 
Zip Code 


TX 
roman shades 22 


QIWIEIRITIYIU 


AISIDIFIGIHIJIKIL a [S| PS OR E S. | 


N ES top 


E E ES EN ED a Pore 


| a a — — ——— 


Groupon 直接 显示 出 用 户 的 热门 搜索 ，CheckPay 则 把 热门 搜索 作 
为 搜索 的 备 选 项 。 


(= Pay a bill 


G Ok Search Groupon 


Near: Current Location X Select a bill to pay 


POPULAR SEARCHES 


Capital One Credit Card (US) 


Credit Card 


Shopping Beauty & Spas 


Home & Garden Events & Activiti... : à 
Verizon Wireless 


Bill/Utility 
Health & Fitness Food & Drink 
Alltel 


Automotive Bill/Utility 


GEICO 


Insurance 


Geico Credit Card 


Credit Card 


Irvine Ranch Water District 
Bill/Utility 


还 有 其 他 一 些 得 重用 户 努 力 的 技巧 ， 其 中 包括 Airbnb 和 
Foursquare 采用 的 基于 地 理 位 置 的 搜索 。 


图 4-23 


iOS 版 eBay 和 Homesnap: 保存 
的 搜索 和 最 近 搜 索 记 录 


图 4-24 


dt xL 版 Groupon 和 CheckPay: 


显示 热门 搜索 
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m 


Sit 


选 
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图 4-25 
安 卓 版 Airbnb 和 iOS 版 Foursquare: 
基于 地 理 位 置 的 搜索 


图 4-26 
安 音 版 Hipmunk 和 Windows Phone 
版 Skyscanner: 搜索 表单 示例 
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((@ [Q Search Listings ! 


Qe Current Location 


Find a place to stay. 


Rent from people in 34,000 í 


Help, | need a place tonight! 


(o i ! ? 


1 2 3 4 5 6 7 8 9 0 
En DUI KEEN E DP PECL fede 


a Wess Vell Wal Fes! ol Wil Wed 
t zxcvbnm € 


123 3 
Sym T^ 


Enalish(US) Q, 
- = - 


搜索 表单 


Filter 


Near: 子 Current Location 


gu Best Nearby 


Our best suggestions for right now 
Specials 
Discounts and freebies nearby 

V 

| { Food 

Y Nightlife 
= 


Coffee 


A[SIDIFIGIH]I JIKIL 


EX ZIXICIVIBINIMIBSI 


7123 space Search 


这 个 模式 的 特点 是 ， 有 一 个 用 于 输入 多 个 搜索 条 件 的 单独 的 表单 
和 一 个 显 式 搜索 按钮 。Hipmunk 和 Skyscanner 的 机 票 和 酒店 搜索 
束 采 用 了 搜索 表单 模式 进行 必要 条 件 的 设置 。 更 多 示例 ， 请 参见 


第 2 Fo 


Search Flights 
sp Search Fio 


»)- Search Details 


A Enter departure 


NJ Enter destination 


| Select dates 


nan EZ «e First 
- | + 


Passenger 
Q Search 


© Recent Searches 


None yet! 


skyscanner 


Austin-Bergstrom (AUS) 


Everywhere 


Any Day | Any Day 


= 


direct travel only Ei | 
cabin class Economy 


iOS 版 和 安里 版 的 Expedia 都 在 起 点 和 终点 字段 上 使 用 了 美观 的 动 
画 效 果 。 这 两 个 版 本 也 都 只 设计 了 必 不 可 少 的 搜索 字段 。 


G2 lh4Mas w% 


xX Search Flights 


w Search Flights 


A Departure Airport N Arrival A... A AUS- N Jfk 
Select a departure date Selectii 9 New pens NY, United Stat... 


JFK McKenzie Jack 
a WER T WOR il kei: ll: 
desde pelo a E tell E Ven n d a NI 


ZX CVBNM alt ZGikicwvbnm €a 


_ Next 


7 AUS-Austin-Ber N JFK-John F. Ker 


Oct 23 to Oct 31 e' 


October 2013 > 
8 night trip selected. 
Sun Mon Tue Wed Thu Fri Sat 


Oct 23, 2013 - Oct 31, 2013 
Drag End Dates to Modify 


搜索 结果 /查看 结果 


在 执行 搜索 后 ， 搜 索 结 未 可 以 在 同一 页 面 亚 示 ， 也 可 以 跳 转 到 专 
门 的 搜索 结 来 页 。 搜 索 结 末 可 以 显示 为 表格 、 列 表 、 地 图 、 卫 星 


图 或 缩 略图 的 形式 。 


[小 贴 士 ] 

最 小 化 输入 字段 的 个 数 。 
正确 使 用 操作 系统 特定 的 
输入 控件 。 仿 照 表 格 设计 
的 最 佳 范 例 进 行 对 齐 、 标 
签 、 字 号 等 方面 的 设计 。 


图 4-27 
dt xj Expedia: 实用 又 美观 的 
搜索 表单 设计 
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图 4-28 
iOS 版 Sam’s Club 和 Saks: 搜索 < cooler 
结果 分 别 采 用 了 列表 视图 和 磁 贴 
视图 


atl Verizon 3G 10:59 PM CI; 


Back Ñ Offers {MM Q 


wv cooler: 309 results Refine 


Search: Jeans Refine 


Fr 一 Igloo® MaxCold Cooler - 150 qt. 


ew > Oooo (9 > 
E $71.98 


Online 


Cus 
o 
E] 
nt 
9 
[] 
ir 
ou 


Igloo Glide Roller Cooler - White - 


110 Qt 
Cl " > 
e $87.98 


Online 


Igloo Rolling Cooler - Majestic 
Blue - 60 qt. 

(0) > Rag & bone/JEAN Rag & bone/JEAN 
$27.72 Jodphur Leather-Trim High-Rise Skinny Jeans 
Online Skinny Jeans $176.00 
$363.00 2424442 


E P T i 


rh 


Cooper Cooler?" Rapid Beverage 
S)?^G & Wine Chiller 


*ee- (4) > 


Select a Club 


根据 搜索 结果 的 类 型 和 用 户 偏好 ， 也 可 以 提供 多 种 视图 选项 。 


Shop 


图 4-29 lo Service 4 12:35 PM a 因 searching. <s y No Service = TENUIT 
10S 版 Airbnb: 列 表 图 片 和 地 Back Photo LETS] Filter a t ilte List Photo 
图 形式 的 搜 x 结果 视 图 20 of 1928 results s 9 Zoom to browse 126 listings. į 
UT | z A Tree pid 
: $67 . * d 


- (4 Nice flat near AVENUE LOUI... 
Ixelles, BE 5 
E o EZD reviews $82 


» ax Lovely&confortable centralr... 


City of Brussels, BE > 
EL C reviews $38 
vB chambre "Savane" PDJ "Bio... 
lg Brussels, BE > 
EY reviews $56 


APT. BXL CENTER (1-6 PP)... 
Sint-Jans-Molenbeek, BE 


$83 
A Panoramic stay in city centre 
ENÉ Brussels, BE 


还 有 一 种 展示 搜索 结 末 的 新 趋势 是 ， 用 卡片 式 、 幻 灯 厂 或 磁 贴 的 
样式 将 搜索 结 末 一 一 呈现 出 来 。 用 户 可 以 用 轻 扫 的 手势 进行 切换 


yan] WAS 
WMI GE 


€ Results 


Ernest N. Morial Convention 
Center 

17 / 30 - 14 reviews 

Convention Center - 8:00 am ~ 5:00 pm 


1.4 mi - Central City - Garden 


New Orleans Metropolitan 
Convention and Visitors Bureau, 
Inc. 

Non-Profit Organization - 8:30 am - 5:00 pm 


0.5 mi - New Orleans 


Eiffel Society 
24 / 30: 6 reviews - $ 
Lounge - Closed Wednesday 


T-Mobile + 


NATIONAL 
GEOGRAPHIC 


12:44 PM 


A : 
ABA Rally interactive 


LONDON 


Hu eg 
35 


7 


A 
90 


15 


VIEW GUIDE 


Hipmunk 采用 甘 特 图 (Gantt chart) 式 时 间 线 设计 ， 


显示 出 机 票 价格 和 起 飞 时 间 。 


开创 性 地 对 机 
票 的 搜索 结果 实现 了 可 视 化 。Expedia 则 视觉 化 了 飞行 时 长 ， 同 时 


T-Mobile # 12:37 PM 
《 AUS © SFO 


Nov 1 - Nov 7 


1 Austin, TX — San Francis... 


Roundtrip AUS 12pm 5pm 9pm 2ar 
price/person | SFO 10am 3pm 7pm 12a 


s254 "- 
in = 
$264  |^5 Es in 

$264 FP ES € 

$334 sas id 
$360 a | = — 


Fare Alert Sort Show All 


Outbound Flights to New York 
1 Traveler, Wednesday, September 25, 2013 


= 


A FLIGHT TO NEW YOF 


JetBlue Airways 


6:40AM O-——O 
AUS JFK 


JetBlue Airways 
12:44 PM 


American Airlines 


O—O 
AUS JFK 


10:20 AM 一 人 


AUS 


JetBlue Airways 
3:05 PM 


SORT FLIGHTS 


JFK 


Oa ee 


AUS MCO JFK 


$448 
11:10 AM 


$448 
5:25 PM 


$455 
2:55 PM 


$459 
10:43 PM 


Q, SEARCH 


Hipmunk ite fi f ERBER ee AR D — PL). ERRER 
显示 在 地 图 中 一 一 很 标准 ， 是 不 是 ?但 还 增加 了 一 个 热力 图 浮 层 
的 选项 ， 用 来 查看 酒店 周围 的 犯罪 区 域 ， 以 及 购物 和 


的 情况 。 


夜生活 方面 


图 4-30 

Google Now 的 卡片 式 搜 索 结 果 
及 National Geographic #9 4] XT Fr 
式 搜索 结果 


图 4-31 
iOS 版 Hipmunk 和 安 卓 版 Expedia 
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图 4-32 
iOS 版 Hipmunk: 用 热力 图 浮 层 


显示 各 种 统计 数据 

图 4-33 
iOS 版 Allthecooks 和 Apple Store: 
延迟 加 载 搜索 结果 


[小 贴 士 ] 
标明 搜索 返回 的 条 目 个 数 。 
用 延迟 加 载 代 替 分 页 。 设 
定 合 理 的 默认 排序 。 


e? 12:40 PM 


San Francisco, CA 
i 1 N ] 


A le > 12:40 PM 


San Francisco, CA 


延迟 加 载 (Lazy Loading) 是 一 种 在 其 他 结果 正在 加 载 时 显示 部 分 
搜索 结果 的 常用 技术 。Allthecooks 等 许多 应 用 都 会 在 用 户 请 动 屏 
幕 时 自动 加 载 更 多 结果 。Apple Store 应 用 则 提供 了 一 个 链接 来 加 
载 更 多 商品 。 


eecco T-Mobile © 4: 4:10PM t= 


Loading recipes. Please wait... 


ay 


e000 T-Mobile = 11:22 PM U» 


< Featured Results 


iPad Air Wi-Fi + Cellular for 
Sprint 16GB - Space Gray 


$629.00 
iPad Air Wi-Fi 64GB - Silver 
$699.00 


iPad Air Wi-Fi 64GB - Space 
Gray 


$699.00 


iPad Air Wi-Fi + Cellular for 
Verizon 32GB - Silver 


$729.00 


Load More Items 
566 items total 


x ON. Xx 
Stores Cart 


Featured Products 


More 


不 要 用 分 页 表格 显示 搜索 结 采 ， 这 样 做 会 破坏 在 移动 设备 上 得 看 
信息 的 目 然 交 互 模式 。 


排序 模式 

乎 果 因 其 “以 用 户 为 中 心 ” 的 设计 而 受到 广泛 赞誉 ， 但 是 我 认为 ， 
App Store 的 搜索 功能 不 应 该 包括 在 内 。 上 比如， 搜索“ 财务 ， 你 会 
得 到 2200 多 个 搜索 结 有 末 。 当 你 开始 训 砚 这 许 许多 多 的 应 用 时 ， 可 
能 会 奇怪 ， 这 些 应 用 是 按 什么 顺序 排列 的 呢 ? 是 按 受 欢迎 程度 、 
评分 高 低 ， 还 是 发 布 日 期 ? 你 无 从 知晓 。 人 很 可 能 你 要 到 别 的 地 方 
去 研究 一 下 ， 看 哪些 财务 应 用 最 适合 你 ， 然 后 再 到 App Store 专门 
搜索 这 些 应 用 的 名 字 。 


0000 T-Mobile * 11:22PM (— eooooT-Mobile * 11:23PM C e0000 T-Mobile * ^ 11:24PM Co 
Q, finance 2200 Results 四 Q finance 2200 Results. € Q, finance 2200 Results € 


Spendin Checkbook 1 
Tracker Y LEUR. 
ktit (16) 


Credit Karma 


iis " M me Lee J 


一 LL 了 


T wi 2 


A ALERT: Recently Closed Accounts: 


X EE D) QQ 59 xx E cQ s$S$ x Eoo Pe 
T pCha t d M Search t € T sche t N M Search Upd t T 5 Chai Ne Ma h t 


同样 ， 如 果 可 以 对 谷歌 地 图 的 搜索 结果 进行 操作 就 会 方便 得 多 。 
我 原 以 为 “汽油 ”这 个 词 的 默认 搜索 结果 会 是 离 我 所 在 位 
Xr Hh, [Hd ALES SS RACES 


实际 上 ， 我 不 得 不 打开 搜索 结果 列表 ， 查 看 每 个 搜索 结果 离 我 的 
距离 。 当 然 ， 这 样 还 不 够 ， 因 为 距离 和 和 a Hs 如 
果 可 以 将 搜索 结果 按 评价 高 低 、 距 离 远 近 或 行驶 时 间 进 行 排序 的 
话 ， 那 就 非常 有 意义 了 。 唉 ， 可 惜 没 这 个 运气 。 


图 4-34 


iOS 版 App Store: 


搜索 、 


HEFFTU fp 3e 


搜索 财务 应 用 
返回 的 2200 个 未 排序 结果 
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图 4-35 
安 章 版 谷歌 地 图 : 在 第 二 页 上 ， 
距离 最 近 和 评价 最 高 的 搜索 结果 
( Pronto Food Mart ) 被 隐藏 了 


图 4-36 
本 书 第 1 版 中 的 单 页 排序 示例 : 
iOS 版 Expedia 和 Target 


« 3 Results List 


Pronto Food Mart 
4,5 x e e e * T reviews 
Gas Station 

0.3 mi 


om Results List 


T-Eleven 
3.6 **** * 5reviews * $ 
nvenien St 


A & R Corner Store 


Texas Gas Service 
Gas Company 


1.2 mi 


Fiesta Mart Inc 
Rosedale Market 3.6 ds sx 48 reviews 
] review Stores and Shopping 
Mn sery Store 0.6 mi * Open 24 hours 
1.5 mi * 7:00 AM - 12:00 AM 


Shell 
Dev's Shell Gas Station 
3.9 * * * * * 5reviews * $$ 


Mini S Foodmart 


虽然 在 上 面 这 些 例子 中 ， 蕴 果 和 谷歌 似乎 忘 了 排序 的 价值 ， 但 排 
序 模式 确实 能 极 大 地 提高 搜索 可 用 性 。 可 以 考虑 在 你 的 搜索 结果 
中 运用 以 下 模式 

。 单 页 排序 

。 排序 浮 层 

。 排序 表单 


单 页 排序 

在 只 需要 少数 几 种 排序 选项 的 情况 下 ， 单 页 排序 可 以 作为 一 种 简 
单 的 一 键 式 解决 方案 。 但 正如 我 们 所 见 ， 许 多 IOS 应 用 都 弃 用 了 
这 种 模式 ， 转 而 采用 更 节省 空间 的 其 他 模式 ， 比 如 排序 浮 层 。 


santa monica, ca — Jul 19 to Jul 21, 2011 


Q santa monica, ca 回 


The Fairmont Miram... 


iPod 会 i 12:14 AM > = 


| Cancel | 


(Gow 9 


Relevance Featured Price A 
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Ec ; $429... GID tripad H DwellStudio® for Target® Infant 
i de dede ded Peres Boy's Collection > 
No Reviews $4.54 -... 
Good Nite Inn - Cala... inline O 
ue From DwellStudio® for Target® Boy's LS 
203 $53... Henley Bodysuit 2pk " 
wenn 14.7 miles Kk kk (1) $4.54 
Ayres Hotel Manhatt... DwellStudio® for Target® Little Dots 
$1 Baby Bedding Collection > 
$189... Xoekk* 9 — $594-.. 
$c de 10.7 miles line Only 
Best Western Plus... DEROENMEDNE: BURNS 
From > 
$193... X ook (8) $5.94 


L4. 4 4. 4.. 


0.8 mile 


电子 邮件 应 用 Boxer dis 点 击 排序 按钮 后 才 显 示 单 页 排序 选项 ， 用 


户 点 击 关 闭 按钮 后 再 隐 
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Q Search j= 
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Re: TNS+D Reminder 
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fave food groups, bacon and... 


Jessica Douglas Oct 19 
Re: working with transcr... 


Hi Paula, | don't remember h... 


Inbox 


Brian Hall Oct 19 
FW: Invitation to bid on the... 


Theresa- It looks like the 
Jhpiego folks are re-requesti... Ü 


Jeanine Harriman Oct 17 
do you have time to giv... 四 
Hi Theresa, The Mobile Spac... 


No Service 3 11:08 PM 
— To-do 
Date Priority Due 


jessica@strategyplusdesign.com | 1 


Jessica Douglas 
Re: working with transcr.. 


Assign 
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Hi Paula, | don't remember h.. 
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Brian Hall 
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Kellie Mecham 
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19 
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Jhpiego folks are re-requesti... 


Jeanine Harriman 
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do you have time to giv... 


Hi Theresa, The Mobile Spac... 


中 


0 
17 


egg 下 拉 来 单 控件 可 以 很 好 地 用 来 选择 排列 顺序 。 
， 但 它 可 以 清晰 地 指明 哪个 选项 


AN AN He — AR 
e 的 。 


看 到 全 部 的 排序 选项 


Relevance 


Relevance 


Avg. Rating 


Directions 


Most Reviewed 
luten Free 


New and Popular y cheesecake’ 


eee Most Photos 


7 —— 


Strawberry Cheesecake 


$2.9 .2 di Strawberry Cheesecake 


Strawberry Cheesecake 


Notebooks í 


Title 
Note Count 


User 


TNID 


notebooks 


1-Subject Notebook 5 


Private 


Livescribe Recordings 
Private 


Notebooks 
Use notebooks to group your notes. Create 
notebooks for interests, projects, travel, and 


more. Organize notebooks into Stacks to show or 


hide groups of notebooks. 


É. New notebook 4 Q 


图 4-37 
iOS 版 Boxer 


图 4-38 


安 卓 版 Allthecooks 和 Evernote: 


下 拉 菜 单 显 示 排 序 选 项 


搜索 、 排 序 和 筛选 


| 
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排序 浮 层 

除了 单 页 排序 ， 排 序 浮 层 也 是 一 种 很 好 的 备 选 方案 。 这 种 模式 不 
会 占用 宝贵 的 屏幕 空间 ， 而 且 如 果 一 个 更 长 、 更 明确 的 标签 效果 
更 好 的 话 ， 你 也 不 必 非 用 短 标签 不 可 。 用 户 可 以 通过 点 击 排序 标 
签 或 图 标 开启 浮 层 ， 可 以 将 它 放 在 搜索 结果 页 面 的 顶部 、 中 间或 
者 底部 。Audible 的 排序 设计 是 最 为 实用 的 一 种 ， 因 为 即便 是 在 浮 
层 关闭 的 时 候 ， 它 也 会 把 活动 的 排序 选项 显示 出 来 。 
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图 4-40 ' 
安 m s Expedia fu Hipmunk 以 及 =; Visible Map Area 四 r3 (Sk Departing Flights 


Prices average, per night 


Windows Phone 版 Newegg: 位 


Austin > San Francisco 5 
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Q Most Reviews 


Best match 
Sort By 


Newest 


Best Sellers 


Price (high to low) 


Most Popular Price (low to high) 


What’ 
anew Bedrooms 


Bathrooms 


Square Footage 


Wunderlist 提供 了 上 下 文 工 具 ， 其 中 包括 一 个 排序 选项 ，6 
Wm P FARE A 


nf FATE 


-Mobile > 11:03 PM e 11:04 PM 


To Dos for Theresa Edi To Dos for Theresa Edit To Dos for Theresa Edi 


Add Jen Albright an... ®©) Add Jen Albright an... ©) + Add Jen Albright an... 


Review Collse draf... 


e d yc Review Cellsec draf... 7) 
* Tue, Oct Tue, Oct 8 ) 


Change mailing add... f é 


Add Jen to strategyplusd... .. 
| |. Introduce Jen to Ivan j 


| |. Change mailing add... - Change mailing add... * 2) 


Add Jen to strategyplusd... . 
J ( 

Introduce Jen to Ivan 

Employees need BC... 


6 Completed Items 


Add Jen to strategyplusd... 
| |. Introduce Jen to Ivan * 


Employees need BC... d 


6 Completed Items 


排序 表单 


排序 表单 模式 可 能 需要 用 户 做 出 更 多 操作 一 一 打开 表单 ， 选 择 一 
个 选项 ， 而 且 可 能 还 要 后 击 “ 完 成 “应 用 或 是 返回 ”按钮 。 


图 4-41 
安 卓 版 Kobo # Trulia: 
式 的 排序 浮 层 


Xt ds HE 


[小 贴 士 ] 

排序 选项 应 该 放置 于 其 人 

对 结果 列表 进行 处 理 的 工 
具 了 附近， 比如 筛选 、 视 图 
切换 开关 ， 以 及 “清除 搜 
索 记 录 ” 按 钮 。 要 明确 显 
示 出 活动 的 排序 选项 。 


图 4-42 
iOS 版 Wunderlist 
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图 4-43 


12:02 PM , T-Mobile + 12:02 PM 


iOS 版 HomeAway x REFINE Y € SORT 
SORT HomeAway Sort HOMEAWAY SORT 
AVERAGE RATING 
CHECK IN Any 
CHECK OUT Any AVAILABILITY LAST UPDATED 
BEDROOMS Any ACCEPTS ONLINE PAYMENTS 
SLEEPS Any BEDROOMS: LEAST TO MOST 
PRICE Nightly Any BEDROOMS: MOST TO LEAST 
LOCATION TYPE All PRICE: HIGH TO LOW 
MORE FILTERS 0 PRICE: LOW TO HIGH 
Clos Refssnerts NUMBER OF REVIEWS 


SPECIAL OFFERS FIRST 


Hipmunk 在 安 蛙 平台 上 使 用 了 排序 浮 层 模 式 ， 但 在 iOS PREA 
选择 了 排序 表单 模式 。 一 个 排序 选项 在 被 点 击 后 立即 执行 ,无需 
Mi MH 或 “完成 ”按钮 。 


图 4-44 全 11:10 PM NE HJ eecoo T-Mobile ® 12:37PM uum 
iOS 版 Hipmunk am cp ito ae ; Cancel 
Q Search Hotels Agony acd 
Omni Austin Hotel at So... Price 
deiciniek | GD OOOO 392 reviews $1 29 
6 mi *rREEWIFI (9 FREE PARKING Depart 


Wyndham Garden Hotel... 
snininie | 6:9 OOOO 546 reviews $1 09 Duration 


6 mi 4€ FREEWIFI FREE PARKING 


Intercontinental Stephen... 
drininie | GD 99999 65 reviews $195 


3 mi > FREE WIFI @ FREE PARKING 

Super 8 Austin Universit... NW 
Aiii | GD 99990 233 reviews $4 
Imi @FREEWIR (c FREE PARKING 


Crowne Plaza Austin 
kiiit | OO 423 reviews $1 30 


2 mi € FREEWIFI (FREE PARKING 


Clarion Inn & Suites Con... 
tiii | GD 9999O 76 reviews 
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"cm 2 SORT 


Pilea Nene Tes Sort by recommended 
price, low to high 

Sort by lowest price 
number of photos 


Sort by star rating 


days on site, newest to oldest 


next open house 


遗憾 的 是 ， 在 Windows Phone 平台 的 应 用 中 ， 排 序 表单 模式 似 平 
占据 了 主导 地 位 ， 而 Newegg 则 采用 了 排序 浮 层 模式 ， 成 为 一 个 颇 
受 欢迎 的 例外 。Windows Phone 应 用 的 另 一 种 选择 是 利用 透视 控 


件 ， 如 下 面 的 Travelocity 示例 所 示 。 


ng to Screenshots 


avin x 
** travelocity ** travelocity 


a 


DiNG eck 4 


2j Embassy Suites Austin Es Quality Inn North Austin 
| PS 


一 


33 Hyatt Place Austin Arboretum 是 PSI? Red Roof Inn Austin North 


eon 


Fairfield Inn and Suites Austin BB Days Inn Austin Crossroads 


P Zr 


The Westin Austin at The Dom IU Econo Lodge Austin 
| | 


一 些 应 用 将 排序 和 筛选 模式 集成 在 一 个 表单 中 。 这 样 做 有 一 定 的 
道理 ， 因 为 两 者 都 是 用 于 进一步 精细 化 搜索 。 但 在 iOS hi Priceline 
FU Yelp 应 用 中 ， 那 样 做 会 导致 页 面 太 长 且 过 于 拥挤 ， 变 成 反 
模式 案例 (参见 第 11 BE). Windows Phone 版 的 Yelp £l iOS 版 


Foursquare 的 单 页 设计 就 干净 得 多 。 


图 4-45 
Windows Phone 版 Realtor.com 和 和 
Kayak 


图 4-46 
Windows Phone 版 Travelocity: 
用 透视 控件 作为 排序 选项 


[小 贴 士 ] 

在 采用 排序 表单 设计 前 ， 
先 考 虑 更 高 效 的 单 页 排序 
或 排序 浮 层 模式 。 如 果 要 
将 排序 模式 和 筛选 模式 集 
成 到 一 页 表单 里 ， 要 尽 可 
能 保持 页 面 简短 、 整 齐 。 
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图 4-47 
iOS 版 Priceline 和 Yelp 


12:15 PM 


Filters 


Most Popular 


n Price Open Now 12:14 PM 


Popularity Price Star Level Proximity 


Hot & New 
Filters LS) 
1 59 Offering a Deal 
* * * P * Delivery 
Distance 
229 
5 miles 
Sort by 
Best Match 
279 Free Internet 
General Features 
Free Breakfast Timol 
$ 4 Parking Good for Kids 
Good for Groups 
Gym/Spa 
图 4-48 . T-Mobile 会 12:27 PM 


FILTERS 


iOS 版 Foursquare 和 Windows 
SORTED BY 


Phone 版 Yelp 


DISTANCE 


I've Checked In Before 


| Haven't Checked In 


My Friends Have Checked In 


Offering Specials 

or | E 
Foto 

PRICE RANGE 


$ $$ $$$ $$$$ I've Save 


EN ~ 


ime est 

大 型 数据 集 可 能 因 太 难处 理 而 变 得 几乎 没 用 。 为 了 让 数据 有 意义 ， 
用 户 经 常 需要 对 结果 进行 科 选 或 细 化 。 竹 选 器 允许 用 户 选 择 条 件 来 
缩减 数据 集 ， 只 留 下 对 于 他 们 来 说 最 可 用 的 、 最 相关 的 搜索 结果 。 
常见 的 筛选 模式 包括 : 

ZEN 

。 PERE 

。 HEE 

Zu 

。 HPN GE 


关于 筛选 技术 的 更 多 内 容 ， 请 参看 前 面 的 搜索 模式 : 限定 范围 的 


搜索 。 


EAT iii 


即 执行 。 


4 


选 


与 单 页 排序 一 


样 ， 单 页 条 选 显 示 在 搜索 结 ia, 


页 。 


KAMA 


66 More » 


E E Se 


m 


eecoo T-Mobile > 9:50 PM 


Q, black e 


Albums More | 
Songs See All 
PEPSLIAN Black 
Pearl Jam L $0.99 
1. Black Radio 2 (Deluxe) 
Black 
TA Kari Kimmel $1.29 
Black (feat. Norah Jones) $1.29 Te 2. El Camino 
Danger Mouse & Daniele Luppi E pnt | 
Black (2004 Remix) 
e Pearl Jam $1.29 3. What The... 
Am 
Albums See All > — 4. El Camino [*Digital Bo.. 


5. Brothers (Amazon MP... 


Ten The E.N.D. (The Brothers (Deluxe EI Ci 6. 13 (Deluxe Version) 
Pearl Jam Energy Never... Version) The 
The Black Eyed... The Black Keys 


n B © Q 
M Movies TV Shows Search 


7. Greatest Hits 


市 选 。 


de 
= 
F 


FA eve, HARER E 


隐藏 起 来 ， 以 便 显示 更 多 的 搜索 TAN o 


4YYY 


zm 


S cats S cats 
Free Pet Exam Coupon MD 
www.banfield.com/ 
Get Your Coupon For A Free Exam And | &, cal | 


Consultation On Pet's First Visit! 


Find A Lost Pet With GPS 
www.pettracker.com/ 

Track Your Pets Location With Tagg Save 20% Now. 
Offer Ends 10/31 


Cat 


Animal 


Gestation period: 64 — £ 


Daily sleep: News Alerts on $cat 
www.seekingalpha.com/ 
Breeds Get free, real time email alerts of breaking news on 


Scat 


Funny Cats - YouTube 


y g i ER 
ii E EM Hie poma — 
7. ^ " 
i ec 29, 200¢ 


Ragdoll Maine Coon Persian Bengal 
Funny cats, sweet kittens - YouTube 
^ dr www.youtube.com/w 
iy “te à May 22, 2013 
Cats (Musical) dim 
š LEAL] 


Q Web fe} Images D Shopping E Videos Li Blogs p 


图 4-49 
iOS + 合 


Amazon Cloud Player: 


+ WY iTunes ft Zt # Jk 
位 于 顶端 


的 单 页 篇 选 


图 4-50 


安 早 版 谷歌 : 


3t 
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4C LKH Groupon 和 Play Store MEH STRIKE, 3 
别 让 用 户 能 够 快速 找到 某 一 类 型 的 优惠 券 和 应 用 。 安 章平 台 把 
这 种 控件 称 为 滚动 栏 ， 而 Windows 平台 则 称 之 为 透视 项 目标 题 
(Pivot Header) 。 


ie e 
安 卓 版 Groupon 和 Play Store: 用 > ^o 
os sh de Re oh 43 FEATURED 
JR a AE LAN Hii He z 
" n p^ 2. Titanium Backup 
Q Austin ME Keyboar Ray PRO Key root 
x E A Swiftkey % — litanium Track 
© Editors’ Choice $3.99 kKkkkk $6.58 
3. Minecraft - 4. Nova Launcher 
Pocket Edition 4 Prime 
Mojang v TeslaCo ftware 
EN— khkk $6.99 Ye 9o $4.00 
— 5. Beautiful 6. Root Explorer 
- I a: Widgets (File Manager) 
Up to Half Off Glass-Bottomed- jui REL ae gees 
Bro Tour kkk $2.49 Yelo* $3.99 
7. Poweramp Full 8. HD Widgets 
$18: 1,0004 Bought * San Marcos M! Version Unlocker Js cloud.tv 之 
t MaxMP(MSRLt. * | ^^ 
kkk $3.99 © Editors’ Choice $1.99 
9. ROM Manager 10. Temple Run: 0z 
(Premium) lisney *& 
khkk $5.99 ye 99e $0.99 
3 &. : 11. ROM Toolbox <> 12. PdaNet+ (FoxFi) 
MEN, Y Eis : i Pro 40% OFF% — rozr; Key 
^ Mo, , tad JRummy Apps | FoxFi Service 
Up t "Off Go-Kart Racing at On Mane $2.99 ende $7.95 
Track Xperience 13. Plants vs. 14, Tapatalk Forum 
; = ombies pp 
$50 580+ Bought * Kyle Zombi A 


SXSW GO 应 用 有 两 行人 筛选 ， 用 来 选择 日 期 、 会 议 类 型 以 及 其 他 高 
级 和 划 选 选项 。 你 可 以 看 到 高 级 和 划 选 在 何 时 处 于 开局 状态 ， 因 为 当 
饰 选 从 关闭 状态 切换 到 开启 状态 时 ， 颜 色 和 文字 都 会 改变 。 


图 4-52 
iOS 版 SXSW GO: WE fg dk 


Q Search 


mm > imer 


All Music Film Interactive 
3 
w RAY SHQ LT: 
3 


JUNE 30 


9:30 AM-5:30 PM 
Doing Business in the USA 
; Summit 
Austin City Hall 3.1 mi 


9:30 AM-6:30 PM 


Hackathon for Social Good 


Classroom 104 - AT&T Confere... 1.9 mi 


9:30 AM-10:30 AM 

OMMA: Is Mobile Really a 
Branding Vehicle? 

Salon C - AT&T Conference Ce... 1.9 mi 
w 10:00 AM-6:00 PM 

(ap 


Digital Creative Job Market 
Exhibit Hall 2 - Palmer Events... 3.6 mi 


Schedule 


T-Mobile + 3:37 PM T = 


A-Z Es Q Search 


CTED Pit meron 


All Music Film Interactive 


SHOVUL | "i y 


JUNE 30 


11:00 AM-1:00 PM 
bd SXSW BBQ Crash Course 
East Tent, Brush Square Park 2.8 mi 


12:30 PM-1:30 PM 


Taco Meet Up 
SXSW Create 3.1 mi 


2:00 PM-3:00 PM 

A Beginner's Guide to SXSW 
Film 

Room 16AB - Austin Conventi... 3.0 mi 


3:30 PM-4:30 PM 

"Watch What Happens Live" w/ 
Andy Cohen & Michael Davies 
Dell Hall - Long Center 3.5 mi 


O 
Schedule 


AEH ARE, PASE LEE AY AE SL mE II ZE, mERA 
HE— HR EH A EE IM, [HE RI LE te S as CH 24 Bi a EB AY 


选项 。 


筛选 浮 层 


F» E | > 
E "mE. : ct finance 


[小 贴 士 ] 

篇 选 选项 的 文字 应 该 清晰 
Whe, THM, BR it 
选 器 是 否 被 应 用 或 是 否 开 


pocket E 局 的 视觉 线索 ， 特 别 是 在 
AA 
先 A Rh 
Q Filter by t tle or UR [x] All Items > Apps A "m Vt PE 件 有 时 会 ka 藏 起 来 
| | L.— nis 
E All ,gle Finance 的 情况 下 。 
https:;//play.google.com/stor |^5| Articles $ 
details?id=YpTA74jz018C k 
play.google.com : " 
d E Videos Apps FREE 
»mberg for Smartphone 
https://play.google.com/stor rN Images Books jerg LP & 
details?id=mlo6gmuq0Y4C k 
play.google.com Magazines FREE 
: ense Manager 
Breezy - Print and Fax . : 
play.google.com Music kx 
FREE 
Movies & TV 


peer rere : 
cas di 
ooo 
FREE 
5. — : 
$ 
sidere 
@ INSTALLED 
ayn 6. Mint.com Personal Finance - 
tuit Inc € 1 
TIT 
@ UPDATE 


图 4-53 
dc si. Jk Pocket 和 Play Store: 下 
Fil Se HS (E e 


筛选 浮 层 模式 是 除 单 页 筛选 外 的 另 一 种 可 行 的 方案 。 这 种 模式 不 


A h H E br m) és 


ZE, tft H Ano — ^ ER, 更 明确 的 标签 效 


果 更 好 的 话 ， 你 也 不 必 非 用 短 标签 不 可 。 用 户 可 以 点 击 “ 筛 选 * 


(Filter) 或 “ 设 定 条 件 ” 


(Refine) 标签 开启 浮 层 ， 也 可 以 使 用 能 够 


清晰 表达 可 以 应 用 筛选 条 件 的 图 标 。 
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图 4-54 
安 卓 版 Airbnb: 筛选 浮 层 


图 4-55 
iOS 版 National Parks 和 安 卓 版 
Expedia: 筛选 浮 层 


[小 贴 士 ] 

篇 选 浮 层 既 能 节省 屏幕 空 
间 ， 又 能 包括 比 单 页 筛选 更 
$205 7 hip Lie, AB i 
浮 层 需要 消耗 用 户 更 多 的 
时 间 和 精力 ， 所 以 在 选择 这 


© MAP 四 PHOTO 


Your best choice in Delhi Center! 


m ini 921 


INSTANT BOOK 


Nice apt, good view, near Airport 


Mumbai, India 


29 REVIEWS S29 


Heritage Apt 1@Hauz Khas Vill... 


^l aia 


20. REVIEWS S73 


Colva Holiday Homes Colva Be... 


South Goa, India 


10. REVIEWS S1 4 


The historical Center of Delhi ! 
| Delhi, India 


62 REVIEWS $20 


INSTANT BONK 


Y FILTER RESULTS 


Filter Search Results 


vt 区 [v 


Private Room Shared Room Entire Place 


MIN PRICE $10 MAX PRICE $1,000+ 


信人 


Beds 
Bedrooms 


Bathrooms 


Apply 


KE FILTER BY ACTIVITY 
em Active Camp Drive Water Snow/lce 


FILTER BY VISITING SEASON 


a Spring Summer Fall Winter 


( e ~ 
A 


了 GEO-LOCATION . 2 s 


TA 
Ut 


f=) Visible Map Area 


的 © 


Tonight Prices average, per night 


La Quinta Inn & Suites Da... 
(eal bad be be a $99 
0.9 mi 


Four Seasons Hotel Dallas 
国 加 回国 $295 
0.9 mi 


Crossland Economy Stud... 


TIN $43 
1.2 mi 


5 mi 10 mi 


A+ 5 
22220] 2222. 


$$ $$$ 


FILTER 


Ness 在 标题 栏 上 用 图 标 显 示 可 供 选 择 的 三 种 筛选 条 件 ， 每 一 项 都 


$ XH] TT FF iE iiem AE, E = "T $a 
ie a FA URTSIUTEIA, SE ACSI rete y Fere RO DIG 


132 | #42 


Thai Thai Café 


Thai $ 


4 " ^ i 
s 
fe You'll be okay with this 
place and it's known to be 
good for lunch. 


Casual Upscale 


Dismiss Save Rate > 
e Hide places I’ve been to 


Asian Dinner Wimberley, TX 


V 71». 


\ 


Piranha Killer 
Sushi 


Dinner 


7 


Marcy Simon 
* XX XX 
Awesome fresh sashimi 


Dismiss Save Rate 


筛选 表单 

筛选 表单 模式 也 需要 用 户 做 出 更 多 操作 一 一 打开 表单 ， 选 择 一 个 
或 多 个 选项 ， 然 后 点 击 “ 应 用 PEEL. HERE PR er Dr eee I 
很 多 的 情况 ， 它 可 以 将 这 些 选 项 分 组 显示 。 

筛选 表单 不 可 避免 地 要 和 哲 时 隐藏 被 操作 的 搜索 结 末 。 注 意 iOS 版 
Zillow 是 怎样 在 用 户 做 出 选择 时 动态 地 更 新 搜索 结果 数 的 ， 这 样 的 
设计 可 以 帮助 用 户 判 断 何 时 可 以 对 搜索 结 末 进 行 操作 。 


图 4-56 
iOS 版 Ness: 每 个 筛选 选项 都 有 
ff xe E 
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图 4-57 
iOS 版 Airbnb, Windows Phone 
版 Skyscanner, iOS 7 版 Zillow: 
EUR 


图 4-58 
iOS 7 版 Walmart: RER / BR 
式 的 筛选 表单 


[小 贴 士 ] 

同 搜 索 表 单一 样 ， 应 当 尽 
可 能 简化 篇 选 表 单 ， 遵 守 
系统 表单 设计 规范 。 不 要 
设计 新 型 的 、 自 以 为 巧妙 
的 季 选 控件 ， 这 样 可 以 避 
免 设 计 成 反 模 式 〈 见 第 11 
= )o 


图 4-59 
Windows Phone 版 Allrecipes: 与 
搜索 相关 的 筛选 表单 
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12:35 PM 


< Map For Sale 277 Results 
ET o 


@ FOR SALE v 


Filters 


HECKWN | Tap to Select 


kour Tap to Select 
@ PRE-MARKET © wv 


@ RECENTLY SOLD 


PRICE 


w/ morning v afternoon w/ evening 


MIN PRICE S10 MAX PRICE $1,000« 


w/ moming v afternoon V evening 


See 277 Results Reset Save Search 


fixe Fe E as FEM EME, AWBiOS 7 版 Walmart 
应 用 所 示 。 


eoo AT&T F 9:27 PM T 6% eoo AT&T F 9:27 PM 


Refine 


Cs EE 


In-Store Items Only 


Refine Cancel 


《 College Living Bedding 


= Mainstays Microfiber 2-Pk Pi... 
a E 7 kkk 
— $8.00 


EBAH OS back Mix and Match Bed-i Brand Better Homes and Gardens (3) 7 
: From $54.88 Price Cocona (1) 
Comfort (8) 


Beautyrest (8) 


V 


Customer Rating 
khkkh Color Comfort Classics (8) 
$15.91 - $32.97 


um 一 i Quiet Comfort Waterproof M... 


Shipping Offers Deco Living (3) 


m 250-Thread Count Luxury Co... 


Joke Special Offers Dono 
1 aM 41109-31060 Divatev (9) 
M Q FB x 9 Fw x ç = 
List Stores Cart More List Stores Cart More List Stores Cart 


Shop Shop Shop 


Windows Phone hi Allrecipes ji BE T Ej SR FAN MERE, 
于 本 章 前 面 介绍 过 的 限定 范围 的 搜索 模式 。 


SEARCH SEARCH SEARCH 
pias choose filters Pea 
Fu 3 dietary filters 
Vegetarian 


28 Vegan 


^ 
No Dai 
var " 


KW 


0 dietary filters 


— High Fiber 


~ 
& No Dairy A No Wheat 
i Low Fat 


4 Low Sodium 
fer No Wheat m Low Carbs 


turkeys Turley turnkey gu 


qi wi eic i y eat ys qu wi tel ira CE Evil iud i fo ip 


Qs Ss Ta te Sy nd bye pz a [soy (G1 fo pops 


TUS Ez DIE EWA DI ny iim) IE 


space = 


(Y) 


AD) Ez i rcs iva [DY Eng imi [Ed 


&l23 , space . H 


(Y) 
/ 


fra eth Re 

fiti xc Fe Fat CE REE r8] 5 i eR A EE AE A A. REE 
Eee — RE. ict the aa MA m SE 
FELLA BRAM m vea. BZ IIA ESE BILE, fixe THU Ae: A, 24 
AY Ur m umi AY, RE A PUE gx HERR n B ER TE f voe 2s 
果 页 上 上。 理想 情况 下 ， 饰 选 抽 居 会 把 搜索 结果 显露 出 来 一 点 。 

Æ iOS 版 Target AP, mien PY, soa SRA 
A. “SPREE AIS, YA FRA EAA RT HY EI. END Fi 
动 状态 的 唯一 反馈 是 ,，“filter” 标 签 显 示 为 蓝 


Graco® FastAction™ Fold Jogger 
Click Connect™ - Tangerine 


Graco FastAction™ Fold Click 
Connect™ Travel System - Monroe 
$203.99 online price 


LA. Pae E838 D tis 20 UR ec E KERAS CRAB D s 


。 HAAR Fae OT Pe ERE 

。 动态 更 新 搜索 结 灯 的 个 数 

。 搜索 结 来 在 背景 层 中 始终 可 见 

。 FEM at BED 1/828 TB EY i it 


Britax B-Agile & B-Safe Travel 
System 


$399.99 


*o ox xx 
Spend $50, get free shipping 


Graco Alano Classic Connect ™ 
Travel tem - 


* 
= Spend $50, get free shipping 


Baby Trend Range Jogger - Liberty 
$99.99 onlineprice MEIN — — IS $99.99 online price 


*ck ox * 
Spend $50, get free shipping 
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Spend $50, get free shipping 


图 4-60 
iOS 版 Target: ffi v6 4H AE 


图 4-61 
iOS 版 Target: 改版 后 的 筛选 抽 履 
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图 4 
iOS 版 ToDo: eee 


[小 贴 士 ] 

fi 6 thy AB AG Gk JA POZE Sip iE 
过 程 中 停留 在 内 容 页 上 。 
在 选项 被 应 用 时 显示 更 新 
后 的 搜索 结果 个 数 ， 在 抽 
居 处 于 关闭 状态 时 提供 得 


选 是 否 活动 的 视 沉 指示。 


图 4-63 
iOS 版 eBay: 多 层级 筛选 抽 
Fé (http://www.youtube.com/ 
watch?v-M R3eSFcMLO ) 
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iOS 版 ToDo 在 导航 抽 敢 中 提供 了 
单 的 情况 下 才 适 用 ， 而 且 应 该 双 
一 个 列表 ， 直 接 进行 算 选 ， 那 么 


筛选 。 这 种 设计 只 有 在 筛选 很 简 
经 过 用 户 测 试 。 如 果 用 户 更 想 打 开 
这 种 设计 就 不 太 有 效 了 。 
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im Q INS = 
C) Reset 
Home Search My 


BT FAN EX 

当 搜 索 结果 的 相关 性 取决 于 地 理 位 置 ， 比 如 在 地 图 上 、 图 表 或 图 形 
中 显示 结 末 时 ， 缩 放 、 放 大 和 拖 动 手势 可 以 用 于 筛选 结 末 。iOS 版 
HomeAway 显示 了 特定 半径 区 域 的 默认 视图 。 双 指 张 开 放 大 地 图 以 
减 小 区 域 半径 ， 然 后 显示 结果 ; 双 指 合并 缩小 地 图 以 扩大 半径 ， 显 
示 更 多 结果 。Windows Phone 版 的 Kayak 也 提供 了 同样 的 功能 。 
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[小 贴 士 ] 

当 结 果 的 相关 性 取决 于 用 
户 所 处 的 地 理 位 置 时 ， 基 
于 手势 的 筛选 就 为 用 户 提 
供 了 一 种 直观 的 方式 来 设 
定 搜 索 结 果 的 范围 。 可 以 
把 这 种 模式 和 其 他 筛选 模 
式 结 合 起 来 ， 因 为 地 理 位 
置 可 能 不 是 用 户 唯 一 想 要 
的 篇 选 条 件 。 


图 4-64 
iOS 版 HomeAway: 基于 手势 的 
筛选 


图 4-65 
Windows Phone 版 Kayak: 基于 
手势 的 筛选 
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HoF 


LRA 


。 工具 模式 
工具 栏 (Toolbar)、 工 具 箱 (Toolbox)、 行 为 召唤 按钮 (Call to 
Action Button)、 行 内 操作 (Inline Actions)、 多 状态 按钮 (Multi- 
State Buttons), E Fx LE (Contextual Tools)、 批 量 操作 (Bulk 
Actions)、 锁 屏 控 件 (Lock Screen Controls) 


在 第 1 章 中 ， 我 们 讨论 过 ， 由 于 屏幕 尺寸 有 限 ， 设 计 师 们 不 得 不 思 
“突破 画布 ， 探 索 新 的 解决 方案 。 在 本 章 正 式 开始 前 ， 我 鼓励 你 接受 另 
一 项 挑战 一 一 摆脱 三 十 年 来 抽象 的 条 面 痪 隐喻 ， 开 始 真 正 地 面 癌 触 屏 
界面 设计 。 为 了 启发 灵感 ， 我 们 先 从 Josh Clark 的 “按钮 只 是 一 种 变通 
FE” (Buttons Are a Hack) 这 一 言论 开始 (http://globalmoxie.com/blog/ 
buttons-are-a-hack.shtml) : 


按钮 只 是 一 种 变通 手段 。 在 现实 世界 中 ， 按 钮 往往 必 不 可 少 ， 

但 它们 和 操控 对 象 有 一 定 的 距离 ， 它 们 是 操控 主体 的 辅助 工 

具 。 比 如 在 此 处 按 下 开关 打开 的 是 别处 的 灯 。 人 们 必须 通过 学 

习 才 能 进行 这 些 间 接 的 交互 ， 且 它们 之 间 的 关联 不 是 很 明显 。 

触 屏 设备 引发 了 一 场 变 革 ， 我 们 能 够 越 来 越 多 地 将 主体 内 容 作 
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为 控制 对 象 ， 从 而 制造 出 直接 交互 的 幻觉 。 
我 并 不 是 建议 将 我 们 熟悉 的 按钮 统统 抛 齐 。 毕 竟 ， 电 灯 的 
开关 应 该 保留 ， 按 钮 也 是 如 此 ， 尤 其 是 在 有 必要 和 触发 抽象 
操作 的 情况 下 (比如 “分 享 到 Twitter”)。 但 是 知道 这 些 
设备 的 用 途 非常 重要 : 在 不 可 能 进行 直接 交互 时 才 需 要 使 
用 。 触 屏 界 面 允 许 用 户 在 更 多 的 情景 中 进行 直接 交互 。 随 
着 新 型 解决 方案 的 出 现 ， 我 们 应 该 把 久 经 考验 的 变通 方法 
放 在 一 边 。 在 设计 触 屏 交互 时 ， 应 当 不 断 问 自己 : RAW 
需要 在 这 里 加 上 一 个 按钮 或 控件 吗 ? 
让 我 们 看 看 TweetCaster 和 Kayak 的 设计 示例 。 在 TweetCaster 中 ， 主 
寞 面 吓 一 个 推 文 列表 。 操 击 一 个 推 文 ， 束 会 在 新 页 面 将 其 打开 。 要 
想 切 换 至 上 一 条 或 下 一 条 推 文 ， 你 需要 使 用 导航 栏 中 的 两 个 按钮 
(向 上 和 问 下 的 箭头 )。 但 我 们 真 的 需要 按钮 来 切换 至 下 一 项 或 前 一 
项 蚂 ? 还 是 说 ， 这 样 的 设计 只 是 时 面 设计 遗留 下 来 的 产物 ?在 触 屏 
上 ， 请 动 翻 页 是 一 种 更 有 效 、 更 目 然 的 切换 内 容 的 方式 ， 关 于 这 
一 点 我 会 在 本 章 后 面 的 部 分 加 以 说 明 。 
那么 Kayak 地 图 上 的 “加 /减亏 ”放大 镜 又 怎么 样 呢 ? 我 记得 从 
20 世纪 90 年 代 我 拥有 第 一 台电 脑 起 ， 这 个 东西 就 存在 了 。 丢 掉 这 
个 放大 缩小 按钮 吧 ， 你 完全 可 以 用 双 指 缩放 手势 实现 这 一 功能 。 
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图 5-1 


iOS 版 TweetCaster 和 安 卓 版 Kayak: 


过 时 的 桌面 端 隐喻 设计 


/ 
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iOS 版 Mail 和 Dropbox: 不 要 混 
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我 相当 确定 ， 到 本 书 下 一 版 问世 时 ， 富 有 创意 的 新 触摸 式 工 具 模 
式 将 出 现 。 现 在 ， 我 们 只 讨论 当前 好 普遍 的 设计 模式 。 诚 然 ， 这 
些 模式 中 有 一 些 是 传统 介面 端 隐喻 的 延伸 一 一 只 是 它们 的 触发 方 
式 不 是 鼠标 点 击 ， 而 是 触摸 。 但 另外 一 些 模式 则 融合 了 触摸 反馈 ， 
X LET Se BE D m Ft LE TABLAS EY 


工具 村 


工具 栏 是 提供 页 面 特定 操作 的 最 第 见 的 方式 。 对 于 工具 栏 ， 每 个 
操作 系统 都 有 目 己 的 术语 和 设计 指责 。 


iOS 
iOS 人 机 界面 指南 (https://developer.apple.com/library/ios/documenta- 


tion/userexperience/conceptual/mobilehig/Bars.html#//apple_ref/doc/ 
uid/TP40006556-CH12-SW4) 中 写 道 : 


尽管 工具 栏 看 上 去 和 导航 栏 或 标签 栏 很 像 ， 但 它 并 不 能 


来 导航 。 相 反 ， 工 具 栏 使 用 户 可 以 在 当前 页 面 操作 内 容 ， 
它 始 终 显示 在 页 面 或 iPhone 屏幕 的 底 端 。 
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Expedia 在 工具 栏 的 基础 上 设计 了 级 联 菜单 ， 而 Wunderlist 为 节省 


屏幕 空间 设计 了 一 个 可 收 起 的 自 定义 工具 栏 。 


11:03 PM 
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Austin, TX 
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Four Seasons Hotel Austin b: 
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ee Hampton Inn & Suites Aus... Ww 
En. . 28800) $98 


v 


另 一 种 设计 方案 是 ， 


个 操作 按钮 可 以 触发 一 页 操作 染 单 (Action 


Sheet), ， 上 面 显 示 了 选中 按钮 的 其 他 可 选项 。 比 如 在 Narrato 中 ， 
点 击 照片 按钮 会 打开 一 个 标准 的 操作 菜单 ， 用 户 可 以 选择 照片 的 
来 源 ， 而 点 击 笑脸 按钮 会 弹出 自 定 义 操作 菜单 ， 用 户 可 以 选择 心 
情 。 这 一 巧妙 的 设计 很 好 地 体现 了 iOS 设计 指南 的 精神 ， 而 不 是 


照搬 其 条 文 。 


10.2°C, Mostly Cloudy 


Q Add a Journal 


& © OG Q9 e 


No Service 10:54 PM CTIN,)D No Service = 10:54 PM t73} 
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From CameraRoll Sad Angry Crying 
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Cancel 


注 1: 最 新 版 Wunderlist 已 经 改 成 固定 工具 栏 。( 译 者 注 ) 


图 5-3 
Expedia 和 Wunderlist 的 自 定 义 
工具 栏 


图 5-4 
iOS 版 Narrato: 两 种 不 同 的 操作 
菜单 设计 
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图 5-5 
将 操作 栏 分 隔 成 四 个 荔 能 区 域 ， 
适用 于 绝 大 多 数 应 用 


图 5-6 
安里 版 Gmail: 操作 栏 按钮 随 页 
面 情景 发 生变 化 


安 早 

Jelly Bean 的 发 布 为 安 齐 界面 带 来 了 一 些 新 的 变化 (http:/developer. 
android.com/design/patterns/actionbar.html), ^X 5 A $^ (KR iOS A 
统 那 样 有 一 个 专门 的 工具 栏 ， 它 的 操作 按钮 放置 在 操作 栏 的 右上 


角 ， 而 操作 栏 位 于 页 面 硕 端 ， 通 第 固定 在 应 用 的 每 个 页 面 上 。 


The action bar is split into four different functional areas that apply to most apps. 


ag Action Bar 4 
pri E23 


1. App icon 
The app icon establishes your app's identity. It can be 
replaced with a different logo or branding if you wish. 
Important: If the app is currently not displaying the top-level 
screen, be sure to display the Up caret to the left of the app 
icon, so the user can navigate up the hierarchy. For more 
discussion of Up navigation, see the Navigation pattern. 


Q 


2. View control 


If your app displays data in different views, this 
segment of the action bar allows users to switch 
views. Examples of view-switching controls are 
drop-down menus or tab controls. For more 
information on view-switching, see the App 
Structure pattern. 


If your app doesn't support different views, you can 
also usethis space to display non-interactive 
content, such as an app title or longer branding 
information. 


3. Action buttons 


Show the most important actions of your app in the 
actions section. Actions that don't fit in the action 
bar are moved automatically to the action 
overflow. Long-press on an icon to view the 
action's name. 


9 App home ag Lower leve 


App icon with and without "up" affordance. 


4. Action overflow 


Move less often used actions to the action 
overflow. 


操作 按钮 应 该 针对 当前 页 面 的 情境 发 生变 化 ， 如 Gmail 应 用 所 示 。 
主要 操作 按钮 应 该 显示 在 顶部 操作 栏 上 ， 次 要 操作 应 该 放 进 次 出 
菜单 (Overflow Menu) 里 ， 用 户 可 以 通过 点 击 垂直 的 省 略 志 图 标 
进行 这 些 操作 。 
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安 时 系统 的 一 个 很 好 的 特点 是 ， 长 按 一 个 操作 按钮 会 出 现 工具 提 
示 ， 说 明 这 个 按钮 的 用 途 。 一 个 不 太 好 的 特点 是 ， 操 作 栏 里 不 仅 有 
操作 按钮 ， 还 不 得 不 放 进 所 有 必要 的 导航 控件 (标题 名 称 、 抽 层 图 
标 、 向 上 返回 按钮 、 下 拉 菜 单 等 )， 因 此 操作 栏 很 快 就 会 变 得 拥挤 
ANI 


Windows Phone 


Windows Phone 应 用 中 的 工具 栏 被 称 为 应 用 栏 (Application Bar, 
http://msdn.microsoft.com/library/windows/apps/ff43 18 13(v=vs.105). 
aspX) 。 主 要 操作 以 带 有 文字 标签 的 图 标 显示 出 来 ， 次 要 操作 ( 称 
HRAM) 可 以 折 登 进 省 略 号 图 标 。 


当 看 到 亚马逊 应 用 试图 把 应 用 栏 作为 主导 航 探 件 (看 看 每 页 底 端 
的 “首页 “搜索 ”和 “购物 车 ”图 标 吧 ) F, RIER. Xie 
我 不 禁 认 为 其 产品 设计 是 由 iOS 狂热 爱好 者 所 驱动 ， 而 不 是 由 一 
个 熟悉 Windows Phone 设计 规范 的 团队 所 打造 。 
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图 5-7 


Windows Phone 版 4th & Mayor: 


放置 主要 操作 的 应 用 栏 
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图 5-8 
Windows Phone M @ Bit. 错误 
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Gemini-20 Portable... 
By American Weigh 

Price: $20.70 

17 New & Used from $17.99 
Xo 


Delete 


Interactive Data 
Visualization for the... 
By Scott Murray 


$19.99 Prime Price: $18.69 
48 New & Used from $9.99 42 New & Used from $16.66 
*oo*o (12) ooo 

Delete 


vie Ie 


a 3. Mobile Design Pattern Baltimore Blues: The 
Gallery DDMAN ria - 


j 
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和 安里 系统 一 样 ，Windows Phone 系统 也 提供 显示 图 标 标签 的 方 
式 。 点 击 省 略 号 图 标 ， 应 用 栏 的 高 度 就 会 增加 一 点 ， 以 便 在 图 标 
下 方 显示 其 文字 标签。 


图 5-9 
Windows Phone 系统 的 应 用 栏 : 


点 击 省 略 叶 显 示 标 答 (?) 
Save telete help settings 


[小 贴 士 ] 

在 工具 栏 的 放置 和 行为 方 
面 ， 要 遵守 针对 特定 系统 
的 建议 。 选 择 用 户 熟 悉 、 


与 操作 系统 无 关 的 模式 : 上 下 文 工 具 栏 
上 下 文 工 具 栏 也 适用 于 输入 栏 或 输入 框 中 使 用 的 操作 按钮 ， 比 如 


2 TRAN 85 B Twitter, Evernote 和 OneNote 工具 栏 中 的 格式 化 和 添加 附件 选项 。 
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e) Theresa Neil Add in Prismatic Feedback Ex ember to set the ala rm 


alarms alarmed alarming 
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.2123 Space 


Q # 


工具 箱 
工具 箱 类 似 于 增强 型 的 工具 栏 。 这 种 模式 在 提供 大 量 效 来 处 理工 
具 的 摄影 和 设计 类 应 用 中 最 为 角 见 。 


通常 情况 下 ， 主 工具 箱 放置 在 屏幕 底 端 。 选 项 可 能 超出 屏幕 宽 
度 ， 需 要 通过 请 动 选 择 选 项 。 从 主 工具 箱 中 选择 一 个 工具 ， 会 显 
示 该 工具 特定 的 一 个 新 的 选项 集 。 比 方 说 ， 在 Pixlr FP, w "3A 
ae” (Adjustment) 就 会 显示 全 部 可 选 的 调整 选项 ， 比 如 “ 亮 白 ” 
(Whiten)、“ 修 补 ”(Touch Up), “A” (Focal Blur) ， 等 等 。 


dd 


Repix 和 Oggl 采用 了 相同 的 模式 ， 但 没有 使 用 浮 层 选项 末 单 ， 而 
古 在 工具 箱 上 方 增 加 了 一 行 ， 以 显示 所 选中 工具 的 各 个 选项 。 


图 5-10 

iOS 版 Twitter, X 5 Jk Evernote 
和 Windows Phone 版 OneNote: 
用 于 文本 输入 的 上 下 文 工 具 栏 


图 5-11 
安 卓 版 Pixlr: 在 工具 箱 里 选择 一 
个 工具 后 ,会 显示 该 工具 的 选项 
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图 5-12 
iOS 版 Repix: 工具 选项 作为 第 
二 行 显示 在 工具 箱 上 方 


图 5-13 
Windows Phone 和 iOS 版 Oggl: 
不 同系 统 的 工具 箱 设 计 有 所 区 别 


[小 贴 士 ] 

标签 加 图 标的 形式 可 以 增 
强 工 具 栏 和 工具 箱 的 可 用 
性 。 如 果 工 具 选 项 把 主 工 
有 具 箱 隐藏 起 来 ， 那 么 应 当 
使 用 一 些 方法 (比如 页 面 
标签 ) 让 用 户 知 道 他 们 所 
处 的 位 置 ， 而 且 要 确保 设 
计 中 有 “取消 ”按钮 。 


do ev Ss 
/ 


m 


IL 

| w^ 
`» 

* 


Tinto 1884 + D-Type Plate 


还 有 一 种 实现 方式 是 显示 主要 的 工具 集 ， 当 选择 了 一 个 工具 时 ， 
HETEMI ERER, ERRERA., Æ Aviary 示例 中 ， 首 
先 选 择 “Orientation ， 然 后 关于 方 癌 的 各 个 选项 才 显 示 出 来 。 使 
用 这 种 模式 时 要 记 住 两 件 事 : 因为 主 工具 栏 现在 不 可 见 ， 所 以 最 
好 重新 说 明 哪个 来 单项 正在 生效 ， 你 应 该 为 这 种 模式 提供 退出 路 
人 径 ， 比 如 “取消 ”按钮 。 


sus ! 图 5-14 
Cancel Photo Editor TOUT Orientation iOS 版 Aviary: AA Oy Xe xx TR. 
(Orientation ) 的 选项 


4:12 PM J No Service + 4:12 PM 


o Gv o Q BL o» 


ckers Orientation Focus Crop Adjust Left Right Vertical Horizontal 


Virtual Makeover 使 用 了 这 种 模式 来 展现 多 种 不 同 的 化 妆 工 具 。 人 写 
的 局 形 工具 箱 出 人 意料 地 好 用 。 


图 5-15 


. ww 
. SI D 
Ngee ron even. clos iOS 版 Virtual Makeover: 局 形 工 
isur in 1 Vibrari Ee cow " Hele 
具 箱 


Y (DE iw 


行为 召唤 按钮 
当 你 只 在 页 面 上 显示 单一 操作 的 时 候 ，“ 行 为 召唤 按钮 ”可 能 比 工 
具 栏 更 好 一 些 。Frank & Oak, Etsy 和 Hipmunk 就 是 这 样 的 例子 。 
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图 5-16 
安 © 版 Frank & Oak, Etsy 和 
Hipmunk: 突出 的 行为 召唤 按钮 


图 5-17 
iOS 版 Foursquare f? Fancy: x 
要 行为 召唤 按钮 与 次 要 行为 召唤 
按钮 从 视觉 上 区 别 开 来 


uture $245.00 


Book on United ($506) 


Apply 


SUMMARY 
$245.00 


Shipping to United States $8.00 
Order total $253.00 
How You'll Pay PayPal 


Her 
Check Out 


une a » SFO) 


$125 rec $95 now 


Ea EE 


Ships within 4 days 


United di » AUS) 
pene! rts Thu, Oct 10, 2013 at 8:42am 
Arr Thu, Oct 10, 2013 at 2:16pm 
3h: Sie: pis nstop 
1 durable workwear sta sc 
fa: “oe nable offic - th seti 
imd depth. v atu dene 


ADD TO CART 


这 种 模式 也 适用 于 有 一 个 主要 行为 召唤 按钮 和 一 个 次 要 行为 召唤 
按钮 的 页 面 ， 比 如 Foursquare 和 Fancy 的 设计 。 要 确保 从 视觉 上 能 
区 分 主要 行为 名 唤 按 钮 和 其 他 按钮 。 


在 这 些 例子 中 ， 行 为 如 唤 按 钮 是 某 个 页 面 特定 的 工具 ， 更 重要 的 
是 ， 它 是 流程 特有 的 工具 。 多 年 来 设计 师 们 都 在 纠结 ， 应 该 在 何 
处 以 及 如 何 放 置 一 个 全 局 行为 召唤 按钮 ， 也 就 是 一 个 在 应 用 的 任 
何 页 面 都 可 以 点 击 进 入 的 按钮 。 在 第 工 章 中 ， 我 们 讨论 了 各 类 标 
准 标 签 栏 ， 其 中 包括 标签 栏 中 间 位 置 放置 单一 操作 按钮 的 设计 模 
式 ， 比 如 Instagram 和 RunKeeperPro。 


eeee0 Verizon = 11:50 AM 
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12:47 PM T 


T j= 


Comfort- U Total sti i Pillow 
$120 - rneys 517 


@ Fancy 


PEOPLE TALK ABOUT 
“bar seven five,” large king,’ 


:= Add to List 50 
“hyatt’s’ dto Li m5 


50 Comments 
QD Andaz Wall Street 


Free Restaurant ©) View previous comments... 
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M. c coolniki 
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FA Andrew C. left a tip here 


20 T-Mobile ~ 3:55 PM , T-Mobile ^ b 图 5-1 8 
Instagram iOS 版 Instagram 和 RunKeeperPro: 
标签 栏 上 的 全 局 行为 召唤 按钮 


Follow a schedule 


Get a day-by-day workout plan with 
instructions & motivation on what to 
do and how to do it. 


Find a Training Plan 
314888 likes 

instagram "| use Average Camera Pro for two 

things: photographing water and shooting in 

low light," says photographer @tonycross. 

Tony provided some tips on using Average 


Real s 
x3 Me Training start Friends Settings 


iOS 6 版 的 Tumblr 应 用 中 ， 点 击 全 局 行为 名 唤 按 钮 会 弹出 一 组 级 
PRET, ZAM TE iOS 7 版 的 设计 中 ， 点 击 全 局 行为 召唤 按钮 则 
打开 全 屏 的 选项 。 
oe T-Mobile + 8:40 PM a ua Verizon > 图 5-1 9 
tumbir. iOS 6 版 Tumblr: 不 平衡 的 右 侧 
a BATA AREA KEE Be 


[2] Following 


{t Settings 


Sign up and get more! 


Follow more blogs. Like and reblog 
your favorite posts. Create your 
own blogs for the world to enjoy. 


Sign up Log in 


Use the Explore tab to 
find blogs to follow. 
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图 5-20 
iOS 7 版 的 Tumblr 把 全 局 行为 召 
唤 按 钮 放 在 了 中 间 位 置 ， 点 击 该 
TEL UE IH AR BER TE ERU 


图 5-21 
iOS 版 Foursquare, Sphere 和 Rove: 
KURTA GRA 


[小 贴 士 ] 

在 帮助 用 户 成 功 地 完成 一 
个 流程 时 ， AHR P 
使 用 有 特定 全 局 操作 的 应 
用 时 (比如 拍摄 照片 、 分 
享 或 录音 录像 入 口 )， 可 以 
采用 行为 召唤 按钮 。 


8:41 


tumbir. 


i3 Quote 


This is your Dashboard. 


一 个 流行 的 趋势 是 ， 在 屏幕 底 端 放置 一 个 悬浮 的 行为 召唤 按钮 。 
Foursquare, Sphere 和 Rove 的 悬 序 行 为 召唤 按钮 就 是 这 样 的 设计 
示例 。 
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Path, Myspace 和 QuickBooks 中 的 悬浮 式 行 为 召唤 按钮 在 点 击 后 
会 显示 更 多 选项 。 在 这 三 个 应 用 中 ,行为 召唤 按钮 从 符号 “+” 变 
成 了 “x 。 顺 便 说 一 句 ， 这 种 设计 是 对 称 交 互 的 正确 设计 方式 
(比如 “打开 ”和 “关闭 ”按钮 要 放 在 同一 位 置 )。 
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No Service + 
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No Service + 


The Last Chapter of Imitation Is Suicide w/ 
@RJD2 by Kenna 


E Myspace shared a profile. 4 days ago. 
GD 70.6K @1 Share 


图 5-22 
ZEM Path: ERR NTA 
召唤 按钮 后 ， 会 显示 浮动 的 选项 


图 5-23 

iOS 版 Myspace: 注意 ， 行 为 召 
唤 按 钮 的 图 标 在 打开 状态 时 从 
“+” 号 变 为 “x” 号 ( 即 “ 关 闭 ”) 
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图 5-24 
iOS 版 QuickBooks: 打开 /关闭 
浮动 行为 召唤 按钮 的 另 一 种 形式 


图 5-25 
iOS 版 Nearby 和 Foodspotting: 
可 以 显示 两 个 状态 的 行内 操作 按钮 
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行内 操作 

行内 操作 指 的 是 操作 按钮 与 其 作用 的 对 象 在 同一 行 ， 而 不 是 在 全 
局 或 整个 屏幕 层级 上 。 比 如 ， 在 Nearby 和 Foodspotting 应 用 中 ， 
每 一 个 列表 项 都 有 一 个 可 显示 两 种 状态 (关注 /已 关注 ) 的 行内 操 
作 按 钮 。 
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许多 应 用 都 依靠 状态 按钮 来 实现 行内 操作 ， 比 如 RetailMeNot 和 
Gmail 中 可 以 进行 开关 切换 的 星 形 按钮 。 参 看 下 一 个 模式 ,“ 多 状 
态 按钮 ” ， 了 解 超过 两 个 状态 的 实现 。 


图 5-26 
iOS 版 RetailMeNot fu Z # Ik 
Gmail: 不 同 状态 的 星 形 按钮 
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如 LinkedIn 和 Facebook 的 截图 所 示 ， 每 一 行 中 都 有 两 个 行内 操 
作 。 如 果 你 想 在 每 一 行 中 放置 两 个 以 上 操作 ， 可 以 考虑 本 鞋 后 面 
部 分 会 讨论 到 的 显示 模式 。 


No Service + 11:23 AM ] [&] 5-27 
Q Friend Requests iOS 版 LinkedIn 和 Facebook: 每 
一 行 显示 两 个 行内 操作 
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MR, BABA PRAY 
图 标 ， 并 且 可 以 考虑 为 图 
标 加 上 文字 标签 。 


谷歌 地 图 、Soundwave 和 Pulse 都 在 对 象 详情 视图 中 提供 了 行内 
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图 5-28 
安 卓 版 谷歌 地 图 、iOS 版 Sound- 
wave 和 Pulse: 对 象 详情 视图 中 
的 行内 操作 


图 5-29 
iOS 版 应 用 商店 : 多 状态 按钮 显 
示 购 买 、 安 装 、 进 度 和 打开 选项 


[小 贴 士 ] 

在 一 系列 紧密 相关 的 过 程 
被 快速 连续 执行 时 ， 多 状 
态 按 钮 十 分 有 效 。 在 设计 
提示 用 户 确认 不 可 撤回 的 
操作 时 ， 也 可 以 考虑 使 用 
多 状态 按钮 取代 对 话 框 。 
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Last year Apple introduced the iPad 
mini, a second size option for its 
tablet lineup. In addition to being, 
well, miniature, it featured a beautiful 
design -- so beautiful, in fact, that the 
iPad Air now mimics it. More 
importantly, with a starting price of 
$329, consumers at last got an iPad 
at a more mid-range price point. 


@ View on Web 


多 状态 按钮 


通 和 来 说， 你 不 应 该 在 一 个 UI 控件 中 设置 多 个 操作 ， 因 为 这 会 让 
页 面 过 载 ， 让 用 户 感到 有 压力 。 多 状态 按钮 是 个 例外 。 这 种 类 型 
的 按钮 既 用 作 操 作 触 发 帮 ， 同 时 也 是 一 个 反馈 机 制 。 


比如 说 ， 体 验 一 下 从 iOS 系统 的 应 用 商店 中 下 载 应 用 。 首 先 ， 你 
会 看 到 “购买 ”的 行内 操作 。 再 次 点 击 会 显示 “ 安 效 。 然 后 这 个 
按钮 变 成 了 一 个 安 卓 进度 指示 器 ， 最 后 ， 当 应 用 下 载 完毕 后 ， 这 
个 按钮 显示 为 “打开 ”选项 。 更 多 例子 请 参看 第 9 草 。 
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多 状态 按钮 的 男 一 个 常见 用 例 是 一 种 删除 控件 。 在 许多 情况 下 ， 弹 
出 删除 确认 对 话 框 会 打 断 用 户 的 操作 流程 (参见 第 113€ RAY 


对 话 框 ” 一 节 )。 但 在 完成 一 项 不 能 撤回 的 操作 前 进行 提示 确认 是 
正确 的 做 法 ， 所 以 多 状态 按钮 应 运 而 生 。 (顺便 提 一 下 ， 归 档 电 子 
邮件 不 是 不 可 撤回 的 操作 ， 但 清空 垃圾 箱 是 不 可 撤回 的 操作 ,) 
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Continue Shopping (18pt regular #202020) 


[] 


一 > Tap to Delete 
» uP 
SJ J 


Two-tap Remove: First tap, button 
changes to red; Second tap commits 
action (item is removed, others slide up) 


上 下 文 工 具 


上 下 文 工 具 专门 针对 一 个 对 象 或 任务 。 只 有 在 上 下 文 建立 起 来 之 
后 才 显 示 这 些 工 具 ， 这 种 设计 很 合乎 情理 〈 还 能 简化 界面 )。 


FN? 


比如 ， 在 Luvocracy MHP, AtEm — kE A BA ae Se, 
都 会 显示 该 图 片 的 上 下 文 工 具 。 这 种 设计 要 比 Pinterest 的 长 按 加 
请 动手 势 更 容易 被 用 户 发 现 。 当 然 ，Pinterest 的 按钮 动画 看 上 去 很 
酷 ， 但 你 可 以 观看 视频 ， 看 看 别人 第 一 次 试用 它 的 情景 。 


图 5-30 
一 个 安 卓 应 用 的 线 框 图 和 交互 说 
明 , 使 用 多 状态 按钮 实现 “删除 ” 
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图 5-31 
iOS 版 Luvocracy: 点 击 省 略 号 
显示 上 下 文 工 具 
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图 5-32 
iOS 版 Pinterest :长 按 一 个 “收集 ” 
(Pin )， 然 后 按 住 不 放 并 滑 向 一 
个 按钮 ( http://www.youtube.com/ 
watch?v=dvXYztMT-bI ) 


图 5-33 
安 卓 版 Any.do: 点 击 显示 上 下 文 
IA 


o 
f CQ AMI 


Any.do 也 使 用 了 通过 简单 点 击 来 显示 上 下 文 工 具 的 方式 ， 它 的 工 
具 包 括 设置 优先 级 、 添 加 提醒 和 分 享 。 


TODAY + TODAY + TODAY + 
Finish Feedback chapter Finish Feedback chapter e Finish Feedback chapter e 
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UPCOMING + 

TOMORROW + TOMORROW + 
SOMEDAY + 

UPCOMING + UPCOMING + 

SOMEDAY + SOMEDAY + 


要 是 列表 项 已 经 是 触摸 对 象 了 ， 比 如 Dropbox 的 文件 夹 ， 怎 么 办 
呢 ? 一 个 办 法 是 增加 一 个 “更 多 ”图 标 ， 点 击 该 图 标 ， 会 显示 上 下 
X LH, Dropbox 使 用 了 浮 层 来 显示 选项 ， 但 你 也 可 以 采用 内 骸 式 
把 其 他 行 推 癌 下方 。 
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Gi Fidelity All Hands Presentation (4) 


还 有 一 种 办 法 是 用 手势 而 不 是 点 击 来 显示 工具 ， 比 如 背 动 手势 。 
Flixster 和 BaconReader 都 通过 水 平 请 动 来 显示 上 下 文 工 具 。 
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图 5-34 
Z = hA Dropbox: Kai “#4” 
图 标 显 示 上 下 文 工 具 浮 层 


图 5-35 
iOS 版 Flixster: 磊 滑 以 显示 上 下 
二 工具 


工具 | 157 


图 5-36 
z = h BaconReader: Æ HA 
滑 以 显示 上 下 文 工 具 


[小 贴 士 ] 
在 选择 一 种 手势 来 显示 上 
下 文 工 具 时 ， 应 该 先 从 最 
简单 的 解决 方案 着 手 ， 并 
对 其 可 发 现 性 和 用 户 效率 
进行 测试 。 


图 5-37 
ZEM Box: 长 按 一 个 文件 可 选 
择 该 文件 , 同时 显示 上 下 文 工 具 ; 
也 可 以 选择 其 他 条 目 
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NOW VIEWING : NOW VIEWING = 
SS Front Page 4 What's hot y EV FrontPage 4 What's hot » IBI 
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7601 today 4 7601 today 4 
to r/pics by jerrrrryyyyy (i.imgur.com) to r/pics by jerrrrryyyyy (i.imgur.com) 
(35629/27938) 880 comments 
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(35629/27938) 880 comments 


This was such a good game. This was such a good game. ` 
2523 to r/gaming by CrazyJezuses (i.imgur.com) « 2523 to r/gaming by CrazyJezuses (i.imgur.com) A 
(5290/2767) 162 comments EXPLOSION (5290/2767) 162 comments EXPLOSION! 


Tiny harvest mouse climbs a 
3552 dandelion [4] 
to r/aww by mocotazo (i.imgur.com) 


(13855/10303) 197 comments 


My dad and I realized this after talking My dad and I realized this after talking 
to each other this morning. E to each other this morning. x 


3409 to r/AdviceAnimals by ItsTheDward 3409 to r/AdviceAnimals by ltsTheDward 
(imgur.com) (imgur.com) 
(13432/10023) 395 comments (13432/10023) 395 comments 
Ready, aim, jum-OH SHIT Ready, aim, jum-OH SHIT 
2964 to r/gifs by ErrorlessGnome (i.imgur.com) e 2964 to r/gifs by ErrorlessGnome (i.imgur.com) e 
(8617/5653) 173 comments (8617/5653) 173 comments 
kids these days his (Sa kids these days his VS 
" 535147 ES 35.117 


这 种 方式 在 效率 类 工具 中 非 第 流行 ， 比 如 电子 邮件 和 任务 应 用 。 
但 要 注意 ， 要 设计 一 种 直观 的 、 有 效 的 基于 手势 的 界面 并 没有 想 
象 中 那么 容易 。 


长 按 还 可 以 用 来 选择 一 个 对 象 ， 并 呈现 出 其 对 应 的 上 下 文 工 具 。 在 
Box 中 ， 长 按 一 个 文件 会 触发 该 对 象 被 选中 的 选择 模式 。 可 以 选择 
更 多 对 象 ， 且 上 下 文 工 具 〈 下 载 、 分 享 、 复 制 、 删 除 等 ) 取代 了 操 
作 按 钮 。 要 了 解 选择 多 个 对 象 的 其 他 方式 ， 请 参见 下 一 模 却 一 一 批 


量 操 作 。 


(> Board Prez ^—- Board Prez 

Oct 28, 2013 alll Oct 28, 2013 

ry 7 Pervasive (= Pervasive 
May 8, 2009 uidi Mav 8 9 
wf_keynote-1.pdf = wf_keynote-1.pdf 
Updated Sep 27, 2013 * 6.1M Updated Sep 2013 * 


wf_keynote.pdf wf_keynote.pdf 
327, 2013 * 6.1 MB Updated Sep 27, 2013 * 


Updated Sey 


批量 操作 

常见 的 批量 操作 包括 选择 、 删 除 和 重新 排序 。 为 了 避免 这 些 选项 
全 部 列 在 每 一 个 条 目 上 而 造成 主页 面 爱 肿 不 堪 ， 就 要 提供 批量 操 
作 的 模式 。 


iOS 原生 应 用 Photos 为 从 相机 胶卷 中 选择 照片 进行 分 享 提供 了 一 

个 “选择 ”模式 。 当 一 张 照 片 被 选中 时 ， 上 下 文 工 具 Coi 

ER) 就 会 显示 出 来 ， 同 时 还 可 以 选择 更 多 照片。 

图 5-38 

iOS 原生 应 用 Photos: 上 下 文 工 
具 可 以 对 全 部 选中 的 条 目 执行 批 
量 操作 


No Service = 6:42 PM 7% @D No Service A 6:42 PM 7% m; 


< Albums Camera Roll Select 5 Photos Selected Cancel 


1,465 Photos 


[1 Add To (i 


iOS 的 Stocks 应 用 提供 了 一 种 可 重 排 、 删 除 和 排序 股票 的 编辑 模 
式 。 根 据 iOS 的 设计 标准 ， 点 击 右 上 和 角 的 “完成 ”会 保存 变更 并 
退出 编辑 模 却 。 


图 5-39 
编辑 模式 下 的 批 
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FTSE 100 


FLAK Fidelity 采用 了 同样 的 模式 ， 一 种 是 选择 股票 ， 男 一 种 是 在 


“关注 列表 ”中 对 列 进行 选择 和 排序 。 


图 5-40 
安 卓 版 Fidelity: 批量 选择 股票 、 
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EDIT COLUMNS 


iOS 版 Path 也 在 编辑 模式 中 提供 了 批量 操作 ， 如 添加 、 删 除 和 把 
联系 人 设 为 重要 联系 人 (用 星 形 图 标 表 示 )。 
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在 安 盾 版 Path 中 ， 为 了 触发 编辑 模式 ， 你 可 以 在 列表 中 长 按 任何 
好 友 。Path 还 可 以 根据 安 盾 设计 原则 改进 其 UL 设计 ， 显 示 出 选中 
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图 5-41 
iOS 版 Path: 编辑 模式 中 的 批量 
操作 可 以 一 次 性 对 多 个 条 目 进 行 


[小 贴 士 ] 

像 删 除 和 重 排 这 样 的 批量 
操作 最 好 使 用 独立 的 编辑 
模式 。 要 提供 一 个 退出 编 
辑 模 式 的 明显 选项 。 


图 5-42 

KAN Path: 左 图 是 现在 的 设计 ; 
右 图 是 建议 的 改进 ， 显示 出 选中 
条 目的 个 数 


图 5-43 
安 卓 版 Audible 和 ioOS 系统 的 
iTunes: d Ez 


El 5-44 
安 卓 版 Any.do: 小 部 件 能 够 提供 
比 通知 更 深层 的 体验 


[小 贴 士 ] 

移动 用 户 体 验 可 以 突破 应 
用 的 常规 边界 。 为 提高 用 
户 体 验 ， 可 以 考虑 采用 锁 
屏 控 件 或 小 部 件 。 


锁 屏 控件 


iOS 和 安里 系统 都 捉 供 了 在 锁 屏 界面 显示 工具 的 选项 。 这 种 模 却 毅 
见于 音乐 类 应 用 ， 但 并 不 限于 此 。 如 末 你 的 应 用 要 在 后 台 运 行 ， 而 
用 户 可 能 需要 快捷 方式 进行 暂停 、 停 止 或 调整 上 应用， 那么 可 以 考虑 
为 锁 屏 设计 工具 。 
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控件 不 必 限 于 播放 和 和 暂停 音 视 频 。 安 日 版 Any.do 使 用 了 小 部 件 来 
在 早上 提醒 用 户 使 用 ， 也 在 一 天 当中 帮助 用 户 管理 任务 。 


Hn r^^. NC 
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955 COMMENTS 


$ COLLAPSE ALL 
Best first 4 ; 


* 
| ellgro 348 points 1 hour ago 


You mean to tell me that I've been able to pirate ps3 
games this whole time? 


MrJohnRock 162 points 1 hour ago 
Yep. 


Plan your day a 
Any.do Moment 1 TASKS 
Blog post Å 
(>) Any.do Reminder 
CANCEL SNOOZE PLAY (x) G) Q) 
a) t] = DISMISS SNOOZE DONE! DO IT NOW 


。 图 表 模 式 
AE Urn We ze HY Ee (Chart with Filters) 、 交 互 式 时 间 线 (Interactive 
Timeline), % #6 & EF fd (Data Point Details), %K WA A (Drill 
Down)、 概 览 加 数据 (Overview plus Data), 、 交 互 式 预览 (Interactive 
Preview)、 仪 表盘 (Dashboard), 4% # (Zoom). wk fW 
(Sparklines), HX A 3X BI] (Integrated Legend), 、 国 值 (Thresholds), 
透视 表格 (Pivot Table) 

为 移动 设备 设计 图 表 是 一 大 挑战 ， 却 也 为 我 们 提供 了 机 会 去 接近 数据 可 

视 化 最 佳 实践 的 核心 。 图 表 应 该 通过 描绘 数据 之 间 的 重要 关系 讲述 故 

事 。 如 采 没 能 实现 这 一 目的 ， 那 它 就 是 在 浪费 空间 。 
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在 本 章 第 一 部 分 ， 我 会 提供 一 些 技 马 来 帮助 你 确保 为 用 户 设计 出 
清晰 而 有 意义 的 图 表 。 为 了 说 明 这 些 技巧 ， 我 们 会 介绍 一 些 好 的 
和 坏 的 设计 示例 。 在 本 章 第 二 部 分 ， 我 们 会 讨论 第 见 的 图 表 设 计 
模式 。 最 后 ， 我 们 将 展示 两 个 集大成 于 一 身 的 应 用 典 沱 。 

技巧 1: 了 解 基础 知识 

许多 印刷 和 桌面 端的 图 表 设 计 准 则 都 适用 于 移动 应 用 的 图 表 设 
计 ， 其 最 佳 实践 也 值得 借鉴 。 黄 茵 敏 (Donna Wong) 的 《< 华 
尔 街 日 报 > 经 济 信 息 图 标 指南 》(The Wall Street Journal Guide to 
Information Graphics, Norton 出 版 社 ，2013 年 出 版 ) 一 书 对 此 做 
出 了 很 好 的 讲解 。SlideShare 网 站 上 有 一 组 演讲 幻灯 片 ， 古 由 商业 
信息 分 析 师 Jen Underwood 制作 的 “数据 可 视 化 最 佳 实践 ”(http:// 
www.slideshare.net/idigdata/data-visualization-best-practices-2013)， 


可 以 当 作 快速 学 习 图 表 基 础 知识 的 捷径 。 


用 来 展示 数据 的 图 表 样 式 有 许多 。 你 可 能 对 其 中 一 些 颇 为 熟悉 ， 
比如 柱状 图 、 折 线 图 和 人 饼 图 。 在 哪 种 图 表 最 好 这 个 问题 上 ， 专 家 
们 多 有 和 争论 。 比 如 说 ，Jen Underwood 等 许多 专家 就 强烈 反对 使 
用 人 饼 图 ， 而 男 一 些 人 则 大 力 支 持 饼 图 。 我 不 会 偏 问 任何 一 方 。 我 
见 过 表达 效果 很 好 的 饼 图 (本 章 中 就 介绍 了 一 些 )， 也 见 过 设计 差 
劲 、 不 知 所 云 的 柱状 图 。 


如 条 你 去 Dribbble 或 Behance 这 样 的 设计 图 库 网 站 看 看 ， 会 看 到 
许多 美 轮 美 钢 的 移动 册 图表 。 遗 憾 的 是 ， 它 们 当中 许多 都 是 设计 
习作 ， 对 信息 的 交流 并 不 是 特别 有 有 用。 下面 两 个 示例 看 上 去 不 钳 ， 
但 都 遗漏 了 用 来 说 明 数 据 背 景 信息 的 图 表 标 题 。 设 计 师 使 用 的 颜 
色 无 意 回 脐 造 了 原本 不 存在 的 数据 间 的 关系 。 
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关键 是 要 了 解 基础 知识 ， 这 样 你 就 可 以 根据 工作 需要 选用 正确 的 
图 表 ， 图 表 包 含 且 仅 包含 所 有 必要 的 信息 。 必 要 信息 至 少 应 该 包 
括 图 表 标 题 、 市 有 明确 标签 的 坐标 轴 ， 以 及 数据 。 


技巧 2: 保持 简单 

图 表 越 简单 越 好 。 注 意 不 要 画蛇添足 ， 让 多 余 的 数据 或 视觉 效 末 
降低 图 表 的 有 效 性 。 还 记得 我 乙 前 捉 到 过 的 专家 吗 ? 他们 把 这 种 
过 度 装饰 叫 作 “图 表 垃 圾 ”(chart junk)， 对 他 们 来 说 ， 没 有 比 找 
出 这 样 的 例子 拿 来 嘲笑 更 有 苇 思 的 事 了 。 所 以 为 目 己 好 ， 也 为 用 
户 好 ， 不 要 做 这 样 的 事情 。 要 了 解 更 多 关于 图 表 垃 圾 的 示例 ， 请 
参看 第 11 革 “ 图 表 垃圾 ”市 。 


Argus 应 用 使 用 了 基本 的 柱状 图 和 折线 图 展现 某 一 用 户 完 成 步行 和 
跑步 目标 的 进度 。 


图 6-1 

虽然 Dribbble 上 的 这 两 个 图 表 设 
计 得 很 漂亮 ， 但 都 没 能 提供 有 效 
的 信息 ， 让 人 困惑 


图 6-2 AT&T < 1 I AT&T = 1:08 AM 
iOS 7 版 Argus: 简单 的 柱状 图 aoe RUNNING 
E ` a a ; Wednesday, Sep 11 at 9:04 PM 
和 折线 图 展现 用 户 完 成 健身 目标 "E 
的 进度 


Saturday, Jul 27, 2013 


11262 


LN r " N È x 
D33 mi 436 we NE 
Active Cal Basal C 


COLLEGE" 
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Distance 


12:00 AM 10:00 PM 


346m 0:33:34 


Distance Active Time 


其 他 简单 、 只 读 的 图 表 在 Trulia 应 用 中 也 可 见 到 ， 这 个 应 用 使 用 
了 环形 图 〈 饼 图 的 另 一 种 形式 ) 来 显示 一 项 抵押 贷款 的 分 类 明细 ， 
而 Zillow Mortgage Calculator 应 用 则 使 用 折线 图 显示 抵押 贷款 利率 
的 趋势 。 


图 6-3 Mobile = 2:36 PM 
简化 原则 : 2 ATK Trulia 中 的 环 ( 1000 E 53rd St contact $ = Today's Rate 3.177% 
形 图 fe iOS 版 Zillow Mortgage 
Calculator 中 的 折线 图 


Compared to the county average ZTillow 


Amenities 


Nearby Banks, Groceries, Restaurants 


Mortgage 


@ Principal & interest 


$2,101 
@ Property Tax 
$2,949 $619 


Monthly g @ Homeowners Ins. 


$229 
© Mortgage Ins. 
$0 Loan Program 15yr Fixed > 
Get Custom Rates Location National > 
Time Period 2 Years > 


Price History 


166 | #6 


技巧 3: 进行 用 户 测试 

好 了 ， 你 的 图 表 看 上 去 非常 性 感 ， 在 你 的 团队 里 也 是 人 见 人 爱 。 
但 现在 的 问题 是 ， 你 的 用 户 能 看 懂 它 吗 ? 为 了 找 出 答案 ， 在 你 进 
行 用 户 测 试 时 ， 要 像 设 计数 学 测验 那样 设计 可 用 性 问题 。 要 疝 参 
与 者 提问 关于 数据 的 具体 问题 。 如 果 他 们 回答 不 出 来 ， 就 说 明 要 
么 图 表 形 式 不 对 ， 要 么 图 表 太 复杂 ， 要 么 遗漏 了 关键 的 文本 标 
签 Mae aA 

比如 说 ， 在 安里 版 TWeather 应 用 的 图 表 测 试 中 ， 我 可 能 会 问 受 试 
者 询问 以 下 问题 : 

。 这 张 图 表 显 示 的 是 什么 时 间 段 ? 

。 周 五 下 十 的 概率 是 多 少 ?” 周一 又 是 多 少 ? 

。 本 周 哪 一 天 温度 会 最 高 ? 哪 一 天 最 冷 ? 


在 测试 的 过 程 中 ， 可 能 就 会 明确 一 点 : 参与 者 不 确定 实 线 和 虚线 
之 则 的 区 别 。 只 需 增 加 一 个 文本 标签 就 可 以 解决 这 个 问题 ,但 要 
再 做 一 次 测试 进行 确认 。 测 试 期 间 ， 我 喜欢 在 参与 者 回 和 众 辣 题 时 
画 草 图 (或 者 请 参与 者 画 章 图 )， 并 且 不 断 对 图 表 设 计 进 行 修改 ， 
直到 参与 者 能 够 正确 回答 所 有 问题 为 止 。 


LI np n 
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图 6-4 


安 卓 版 1Weather 应用: Æ Aik 


涯 了 图 例 ， 右 图 增加 了 图 例 


技巧 4: 了解 你 的 工具 集 

别 急 于 打开 Photoshop， 你 应 该 先 熟 悉 一 下 你 的 开发 团队 正在 使 用 

的 图 表 库 。 有 许多 不 同 的 图 表 库 可 供 选 择 ， 以 下 是 一 些 值得 探索 

的 热门 图 表 库 : 

* Core Plot (https://code.google.com/p/core-plot/) 适用 于 iOS 

e ShinobiControls (http://www.shinobicontrols.com/) 适用 于 iOS 和 
安 早 

。 TeeChart (https://components.xamarin.com/view/TeeChart) 适用 于 


Xamarin 


。 Telerik RadControls (http://www.telerik.com/products/windows- 
phone.aspx) 适用 于 Windows Phone 

。 JS 图 表 库 , 比如 AnyChart (http:/Avww.anychart.com/products/anychart/ 
gallery/) 或 者 amCharts (http://www.amcharts.com/) 


让 开发 人 员 给 你 展示 这 些 图 表 库 的 可 用 功能 ， 并 就 图 表 设 计 疝 他 
们 咨询 。 除 了 用 户 测 试 之 外 ， 设 计 师 和 开发 人 员 之 间 的 早期 协作 
是 保证 图 表 满足 用 户 需 求 的 最 好 方式 。 

好 了 ， 你 已 经 学 到 了 一 些 基 础 技巧 ， 现 在 让 我 们 来 看 看 移动 应 用 
图 表 中 最 常见 的 设计 模式 .。 


it Al Um wees HJ E 3 
BsF fell P (46 RC th, t oe zs BY LAS s — 7s fui PLA e. Æ Fidelity 和 
StockPlus 这 样 的 应 用 中 ， 用 户 可 以 查看 不 同时 间 段 的 数据 。 


在 采用 单 页 算 选 设计 模式 的 时 候 ， 要 为 触摸 对 象 保留 足够 的 空间 。 
在 Chaikin 应 用 中 ， 算 选 控件 放 在 了 图 表 内 ， 人 们 几乎 看 不 见 它 
们 。 在 本 书 第 1 版 出 版 之 后 ，Chaikin 重新 设计 了 这 个 页 面 ， 把 时 
间 筛 选 器 放 到 了 左边 ， 但 这 样 还 是 没有 解决 问题 ，。 


图 6-5 
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版 StockPlus: # Hy IE] Pc ig 3x 
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Volume 1,538,347 
Open $68.90 


Quote Details A © 


图 6-6 


3:38 PM ; | x )bile + 4:24 PM ， 10S as 两 个 版 本 的 Chaikin: 


Company Profile Company Profile 选 控件 还 是 很 难看 见 


Spdr S&P 500 Etf CMCSA Comcast Corp A 


UM yu 


Fundamentals Performance 
Mkt Cap. $81.30b 52 wk Hi 136.43 
Revenue $0.00m 52 wk Lo 105.23 
P/E 0.00 52 wk Perf +10.50% 
Yield 2.16% Rel to S&P -0.18% 


Fundamentals Performance 
Mkt Cap. $124.73b 52 wk Hi 48.65 
Revenue $63.67b 52 wk Lo 35.14 
P/E 20.47 52 wk Perf +35.71% 
Yield 1.64% Rel to S&P +2.57% 
LÀ 
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iOS 版 Fidelity 和 Windows Phone 
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图 6-7 Body Weight Latest: 133 Ibs 


iOS 版 DailyBurn Tracker: 点 击 
El ds Sp. AB fi Be ZB 


Nov 10 Nov 11 Nov 12 Nov 13 Nov 14 Nov 15 No 


Done Change Tracker 


MER, WISE A EEA iE ETM. FEAN, Æ iOS hk Fidelity 中 ， 
可 以 选择 数据 来 源 进 行 对 比 。 


图 6-8 
iOS 版 Fidelity: 数据 来 源 对 比 


olwlelnalrlvlullole 
[TsToTeTertTy Te 
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DELAYED AS OF 4:07PM ET 11 


PM ET 11/22/13 
.SPX 1,804.76 +8.91 (+0.50%) 


(X) AAPL $519.80 


[小 贴 士 ] 
使 用 常见 的 筛选 模 式 ， 比 
如 单 页 筛选 、 筛 选手 层 以 
A d BRR CAUSAS 
“Sip FRA.” =F ), 


VOLUME 7 


CIR ait ll KON ere 


11/22/2013 


Fidelity 应 用 还 提供 了 改变 图 表 类 型 、 国 值 和 定价 坐标 轴 的 设置 
选项 。 


@@000 T-Mobile + 
DELAYED AS OF 4:07PM ET 11/22/13 


SPX 1,804.76 +8.91 (+0.50%) 


,791 
VOLUME 7 299.3 
149.7 


11 12PM 1 2 3 11/22/2013 11 


4:08 PM 
Chart Settings 
Chart Type Indicators 
| 4 | Candlestick (Standard) | | Upper None 
g Candlestick (Filled) Pricing Axis 
“~~ Line | | Linear V | 
| | 
| | 
Mountain V | | Logarithmic | 
| B DNA | p 
| +t OHLC | 


交互 式 时 间 线 

EA BRI, RRS T — aE 2:28; HA” (Scrolling 
Window) 的 模式 ， 并 用 iOS 版 Roambi 作为 示例 。 现 在 我 已 经 
把 这 种 模式 扩展 至 任何 与 图 表 或 数据 可 视 化 结合 起 来 的 交互 式 时 
间 线 。 

以 Roambi 为 例 ， 屏 幕 底 端的 小 图 表 提 供 了 一 个 用 来 选择 时 间 点 
的 交互 式 控 件 (两 个 拖 搜 手柄 )， 在 上 方 显示 所 选 时 间 段 内 的 大 
图 表 。 


iOS 版 Fidelity: 对 比 图 表 和 图 表 


Sales by Product Line : Pet Supplies Trend : POL ORDER=6 R?-0.38 


iOS 版 Roambi: 用 来 选择 时 间 D WwW M 
& OW +A 140 $109,510 


6/20/2008 1/6/2009 7/25/2009 2/10/2010 


Sales by Product Line : Pet Supplies Trend : POL ORDER=6 R?-0.38 
M 


$112,990 


4/15/2009 6/15/2009 9/23/2009 


| RAMH Dark Sky 提供 了 一 个 时 间 线 和 一 个 播放 按钮 ， 来 显示 天 
| m 气 随时 间 变 化 的 动画 。 它 还 增加 了 一 个 “Now” 和 选项， 用 来 跳 回 到 
比 起 静态 图 表 或 可 视 化 数 、 

J 当前 的 时 间 点 。 
据 ， 交 互 式 时 间 线 能 为 用 
户 在 选择 上 下 文 方面 提供 
更 多 自由 和 控制 能 


0000 T-Mobile = 4:18 PM @ 1 499688 ? — e0000 T-Mobile > 4:19 PM @ 7 48956 


El PRECIP / TEMPERATURE CLOSE ÈJ PRECIP / TEMPERATURE CLOSE 


TODAY 2:11 PM NOW > TODAY 4:18 PM NOW 


soma aom [dera zoo | :mm [cora | comu | eam| cor ooa soon [aora [zou | seo | soma | soobu | exon stor 


数据 点 详情 


因为 悬 序 设计 在 移动 端 行 不 通 ， 而 长 按 又 不 是 特别 直观 ， 所 以 束 
需要 一 种 有 别 于 前 两 者 的 交互 来 显示 特定 数据 点 的 详情 。 在 iOS 
版 Zillow Mortgage Calculator 中 ， 点 击 饼 图 中 的 一 个 局 区 可 以 显示 


于 项 的 分 类 详情 。 


e F 2:36 PM 


Your payment $1,522/mo Your payment $2,322/mo 


Tap the chart to see what 
à goes into your payment 


%Down sm || ($609 20.0% %Down ($93k) 20.0% 


Rate m) 4.202% Rate m) 4.202% 


Price Cm LU $300,000 Price -— | | $465,000. 


图 6-11 

iOS 版 Dark Sky: 交互 式 时 间 线 
加 播放 按钮 (http://www.youtube 
.com/watch?v-d ZJY VPxRe8& 
feature=youtu.be ) 


6-12 
iOS 版 Zillow Mortgage Calculator: 
点 击 图 表 区 域 显示 数 据点 详情 


图 6-13 


iOS 版 Apple Stocks 和 Yahoo! 


a 


IND 


图 6-14 


iOS 的 Apple Stocks: 单 点 触摸 
和 多 点 触摸 时 的 数据 点 详情 


在 Apple Stocks 和 Yahoo! Finance 应 用 中 ， 点 击 一 个 数据 点 ， 它 就 会 
在 图 表 底 端的 预览 窗口 (Preview Window) 中 高 亮 显示 出 来 (虽然 
你 得 尽力 徘 近 才能 看 到 )。 在 这 些 应 用 中 ， 整 个 图 表 就 是 一 个 触摸 对 
象 ， 所 以 你 可 以 点 击 图 表 的 任何 位 置 ， 然 后 拖 搜 调整 到 特定 的 日 期 。 


T-Mobile + 2:33 PM 


August 22, 2013 
15,010 


32.96 
-0.47 (-1.41%) 
Vol 260K 


在 Apple Stocks 应 用 中 ， 触 摸 一 点 会 显示 该 数据 点 详情 ， 但 同时 触 
摸 两 点 (多 点 触摸 ) 会 显示 两 个 数据 点 的 差异 。 


6:36 AM 


Oct 23, 2005 - Jul 15, 2012 
164.25 +13.71% 


2006 2007 


在 Traffic for Google Analytics 中 ， 数 据点 很 大 ， 你 完全 可 以 点 击 它 
们 ， 但 这 个 应 用 也 会 自动 高 亮 你 沸 动 到 的 月 份 数据 。 在 我 加 前 深 
动 时 间 时 ， 首 先 高 亮 显 示 9 月 ， 然 后 是 8 月 ， 最 后 深 动 回 到 5 H, 
如 此 这 般 。 


©  YOURWEBSITECOM — CK M © — YOURWEBSITECOM — CH Bl D  YOURWEBSITECOM  < iOS 版 Traffic for Google Analytics: 
你 可 以 使 用 手势 查看 数据 点 详 
情 ， 并 改变 时 间 段 (http:/www. 
youtube.com/watch?v-UqZkx 


Tur 2 584 n 


2012 2012 2012 


+8% LAST YEAR 
© 


2,464 


+26% LAST YEAR 
O) 


SEP AUG MAY 
VISITORS VISITORS VISITORS 


iOS 7 版 的 Roambi 采用 了 一 种 巧妙 的 设计 ， 你 只 需 点 击 拖 搜 手柄 
就 可 以 切换 多 个 数据 来 源 ， 查 看 其 详情 。 


图 6-16 
(B) Prescriptions © Prescriptions iOS 版 Roambi: 数 4g 点 详情 切 换 器 
( http:/www.youtube.com/watch?v= 
Apr-13 Apr-13 . 
Corizol 15,401 Prextrol 23,471 eae ) 
500 500 


[小 贴 士 ] 

我 们 的 网 页 体验 已 经 给 用 
户 设 定 了 预期 效果 数 
据点 详情 会 通过 悬浮 显示 ， 
但 这 在 移动 应 用 上 行 不 通 。 
可 以 考虑 在 用 户 点 击 数据 
点 获取 更 多 信息 时 再 提供 


详情 ， 


Dark Sky 辟 励 用 户 通过 滑动 查看 详情 。 当 载 入 周 视图 时 ， 第 一 行 


会 弹跳 出 来 捉 示 你 使 用 请 动手 势 。 请 动 该 行 后 ， 当 天 的 天 气 详情 
就 会 显示 出 来 。 


图 6-17 
iOS 版 Dark Sky: 滑动 行 显示 详 
情 (http://www.youtube.com/watch? 
v=d ZJYVPxRe8 ) 


图 6-18 
iOS 版 Withings: Bi E BA 
数据 点 详情 ; . 点 击 详 情 跳 转 到 有 
更 多 详情 的 新 页 面 
[小 贴 士 ] 


吸引 用 户 逐 级 深入 查看 更 
多 数据 。 使 用 系统 相应 的 控 
件 来 提供 返回 路 径 (PP 10S 
系统 的 “返回 ”按钮 和 安 卓 
系统 的 “向 上 ”按钮 )。 
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进一步 介绍 。 扩 击 数 据点 会 显示 详情 ， 然 后 pe 
新 页 面 ， 你 可 以 在 这 个 页 面 进行 编辑 或 其 他 操作 。 


5PM = 5:05 PM 


和 加 ~ Withings © 
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November 7, 2013 at 5:04 PM 
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Withings © 
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November 7, 2013 at 5:04 PM 
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逐 级 深入 
如 果 想 在 上 下 文 中 多 显示 一 


足够 了 。 但 有 时 候 ， 用 户 需 要 更 效 
入 模式 就 会 非 党 有用。 


PV, ELAS AS FESO SS EET Beet 
KHF, KAR 


宋 入 地 查看 数据 。 


LA Mint “fil, TA ELH, PRET, 再 下 
一 层 是 有 更 多 详情 数据 的 单个 预算 页 〈 以 及 编辑 国 值 的 按钮 )。 


如 末 没 有 清晰 的 视 完 提示 可 以 护 击 进入 下 一 层 ， 那 么 你 应 该 使 用 


No Service F s: 4:11PM C73 ED! No Service ^? * 4:11PM 7% EP! No Service ^^ > 4:11PM C7} EP! 
Settings Overview < Overview Budgets 3r < Budgets Groceries 
PENDING 
ACCOUNTS December 2013 $6,006 Left 
4 $3,769 of $9.77. ; ; 
Cash $33,8 2 No Pending Transactions 
Credit Debt -$1 3,81 9 
AUTO & TRANSPORT DEC 19, 2013 
BUDGETS December Gas & Fuel $289 Left HEB $4.25 
= a Groceries 
Y 
BILLS & UTILITIES BESTE AINE 
CASHFLOW — Utilities -$29 Over HEB -$37.54 
= $10,479 Earned Groceries ` 
SD -$19,109 Spent $254 of $225 
DEC 17, 2013 
FOOD & DINING 
ALERTS 
HEB -$161.40 
Groceri 
ADVICE C 13, 2013 
You recently donated to a charity. Tur a 
HEB -$34.31 
SPENDING December201 = ăě = = œE | VV Groceries 
p E Uncategorized HEB -$124.87 
K 0 out of 5 acc j [A of 5 xdatex í 


S51, ADDA ERARA FA CAU 8 草 )。 


概览 加 数据 


我 们 在 第 3 章 中 也 谈 到 了 概览 加 数据 模式 ， 但 在 这 一 草 里 ， 它 专 
使 用 图 表 显 示 的 概 蜗 。 这 种 图 表 模 式 是 过 去 几 年 中 变化 最 大 的 


模式 之 一 。 


本 书 第 1 版 主要 讨论 了 在 上 方 显示 趋势 图 表 、 下 方 显示 数据 详情 


表 的 设计 模式 ， 像 Gaug.es 和 Personal Capital 设计 的 那样 。 


cosse AT&T P 1:34PM 9 70% MIO 
B- Octodex 3 ull ”Net Worth: $2,399,551 
Um AUG 13 - SEP 11 $31.1K 
| | i CASH $19,801.97 
| Rm m Aes | Weis Fargo $570.14 
Views People Business Checking 12:44 PM 
465 289 Wells Fargo $500.00 
689 416 Business Market Rate : | 12:44 PM 
603 310 Wells Fargo $956.66 
February 18 582 EU we ati 
bruary 17 827 515 Wells Fargo $2,000.78 
1,864 wi = lén 
INVESTMENT $1,248,110.02 
1,768 1,182 
Fidelit 1,357.11 
February 14 744 EET os m s = FPN 
February 1 1,682 1,222 ; : 
Madrigal Electromotive $63,901.00 


图 6-19 
iOS 版 Mint: 逐 级 深入 显示 详情 
EX 


图 6-20 

dt xk Gaug.es ff iOS JX Personal 
Capital: 趋势 图 表 位 于 上 方 ， 详 
细 数 据 表 位 于 下 方 


图 6-21 
iOS 版 LearnVest 和 和 安 卓 版 Hello- 
Wallet 


图 6-22 
iOS 版 Personal Capital 的 两 个 迭代 
版 本 : 迷你 图 被 背景 区 域 图 取代 


[小 贴 士 ] 

对 用 户 来 说 ， 带 有 详细 数 
据 的 可 视 化 概览 比 没 有 摘 
要 的 数据 列表 更 有 价值 ， 
在 这 种 情况 下 可 以 采用 这 
种 模式 。 


July Budget 一 
Expenses + Bills = Budget 
Gus RESTAURANTS & BARS — 5455 inten c: m 
| $200 $655 | - zi = 
~» Groceries 
0 SSS aa $146 left 
$750 i) | = 
AVERAGE SPENDING Car / Transportation 
PER MONTH OF OVERALL SPENDING $450 ien 
Spent $0 of $450 
JANUARY 2013 Health 
= $235 left 
Jon & Jeff's Rib Shack $24.50 7 
Re ints & Bar pent x 
Restaurants / Bars 
Casa De Will $49.50 - $148 iet 
ED ura YY Spent$53 of$200 
Sud Canina $6.60 Children / Family 
s] $76 ien 


但 这 种 模式 并 不 只 限于 只 读 图 表 和 其 各 自 的 数据 表格 。 比 如 在 
Personal Capital 应 用 中 ， 交 互 式 环形 图 表 用 来 显示 概览 。 点 击 一 个 
届 区 ， 下 方 的 表格 就 会 突出 显示 相应 的 类 别 和 总 数 。 


这 个 应 用 的 一 个 早期 版 本 还 在 环形 图 表 中 间 放 置 了 一 个 迷你 图 
(一 种 很 小 的 图 表 ， 在 本 半 后 面 会 做 介绍 )， 为 选中 类 别 的 支出 显 
示 了 更 多 的 信息 。 这 种 设计 后 来 被 新 的 设计 所 取代 ， 在 新 的 设计 
中 有 显示 增 减 百 分 比 的 数字 ， 并 在 圆 环 后 面 的 背景 中 放置 了 随时 
间 变 化 的 区 域 图 。 
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E'TRADE Bank $3,157 Stock Options - Ruck... $87,677 
Brokerage 4078 -$36.20 Ruckus Wirelt -$358.80 


Stock Options - Goog... $73,221 
Google Ir +$740.40 


evontin | Madrigal Electromotive $63,901 


概览 加 数据 模式 的 另 一 个 变 体 可 以 在 安 卓 版 和 ioOgS 版 的 Move 应 用 
中 看 到 。 概 览 用 气泡 图 呈现 ， 而 详细 数据 则 用 时 间 线 显示 在 下 方 。 


Fourbarrel Coffee 


9.082 


steps 


Home 


Home 


LAAMA 


这 种 模式 在 第 2 章 中 也 曾 提 到 。 在 Trulia Mortgage Calculator 的 例 
子 中 ， 你 可 以 看 到 ， 通 过 请 动 页 面 下 半 部 分 的 请 块 ， 我 的 年 收入 从 7.5 
万 美元 增加 到 了 29.5 万 美元 ， 页 面 上 半 部 分 的 饼 图 也 随 之 重 绘 ， 同 


时 图 例 也 更 新 了 。 


eoooo T-Mobile = 6:06 PM eoooo T-Mobile = 6:06 PM 


Payment Affordability Refinance Payment Affordability Refinance 
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4 Ppe 
Down Payment $30,000 (10%) Down Payment $30,000 (2%) 
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Monthly Debts $300 Monthly Debts $300 
em «7 


Calculators More My Rates Calculators 


Zillow Mortgage Calculator 和 Intuit’s TaxCaster 运用 了 同样 的 交互 


设计 。 


图 6-23 
安 卓 版 Move: 概览 加 数据 的 另 
一 种 设计 方案 


图 6-24 
iOS 版 Trulia Mortgage Calculator: 
交互 式 预览 模式 的 图 表 


图 6-25 T-Mobile * 2:37 PM 


7:11 


INCOME TurboTax Y 


iOS 版 Zillow Mortgage Calculator = You can afford $416,100 
ew Phone 版 TaxCaster: MONTHLY BUDGET your pay & withholding 
交互 式 预览 


— 
- "^ your refund 


Tap the chart to see what i " "d 1 $3 059 
goes into your budget i 


we recommend: 
Turbolax TurboTax Free Edition 


Your Taxable Wages 


Income mi) $70,000 /yr. 

$Down mmm] $93,000 m $101,000 
Monthly Debt $250 /mo. ET EE 

Rate um] 3.17796 


$15,500 


Coa see vances ORORO 


Mint EMRI Tí JH. TZEAR. XA UTA RAR AS 
显示 了 选中 类 别 下 过 去 6 个 月 的 支出 折线 图 。 这 个 页 面 还 设计 了 
一 个 视觉 吸引 《〈 见 第 8 章 )， 引 导 用 户 “ 点 击 或 拖 搜 以 改变 预算 。 
当 用 户 调整 手柄 时 ， 新 的 预算 预览 图 就 会 显示 在 页 面 上 方 ， 直 到 
AFT FAA ALLIES 


[小 贴 士 ] 
交互 式 预 览 模 式 适 用 于 需 
要 显示 多 个 预测 的 场景 ， 
常见 于 个 人 理财 类 的 应 用 。 


) 1:13 PM , -Mobile 4 1:13 PM 
Budgets Gas & Fuel Cancel Gas & Fuel 


Slide up-down to change, 


We'll set a budget of $300 each month BUDGET left-right to change accuracy 
for Gas & Fuel that starts over at the $240 $1 $3 
beginning of every month. | Tamas 


Tap or drag to change budget. 


/ BUDGET | 
\ $300 | 


图 6-26 
iOS 版 Mint: 设置 预算 的 交互 式 


图 表 


仪表 盘 

这 种 模式 在 第 1 人 昔 中 也 有 所 涉及 。 仪 表盘 可 以 用 作 主 导航 ， 比 如 
Withings 和 Mint， 它 们 都 采用 了 仪表 盘 作 为 进入 指定 模块 的 导航 
中 枢 。 


No Service 他 =< 4:11PM C 73} Gs 图 6-27 
= Withings * O Settings Overview 安 卓 版 Withings 和 108 版 Mint: 
Thomas ACCOUNTS TX. 表 D 用 TE t = 航 
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^ ADVICE Ea 
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ret ae .80 Ibs 


today, 8:35 : "m 
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Sleep duration (weeks) @ lll Uncat d 
ncategorize 


i In hir 5h 13mn 2- 0 out of 5 accounts updated [4 
' since 30 iul. 2012 


Gekoboard 使 用 了 一 种 可 目 定 义 的 仪表 盘 来 跟踪 销售 数据 。 你 可 以 
添加 、 删 除 或 重新 排列 其 中 的 小 部 件 。 


图 6-28 
iOS 版 Gekoboard: 可 自 定 义 的 
DR AE 


[小 贴 士 ] 

如 果 同 时 显示 多 个 图 表 可 
以 更 好 地 说 明 一 个 多 维度 
人 信息， 那么 可 以 采用 仪表 
板 模式 。 如 果 只 是 合并 不 
同 的 无 关联 的 数据 ， 就 不 
要 使 用 这 种 模式 。 


图 6-29 
iOS 版 RunKeeper 和 安 卓 版 Lose 
: MATE A KAS 


图 6-30 
iOS 版 Analytiks: 设计 精美 的 仪 
表盘 同时 用 作 主 导航 和 和 次 级 导航 


仪表 盘 也 可 以 用 作 次 级 导航 ， 比 如 1OS 版 的 RunKeeper 和 安里 版 


Lose It!， 二 者 都 使 用 了 多 个 准 加 图 来 显示 相对 于 一 组 目标 的 活动 
进度 。 


Analytiks 采用 了 仪表 盘 同 时 作为 主导 航 和 次 级 导航 。 首 页 显示 网 
站 的 关键 绩效 指标 ， 你 可 以 点 击 进 入 次 级 仪表 盘查 看 关于 用 户 特 
征 、 训 览 右 、 受 众 和 访问 持续 时 间 的 详细 指标 信息 。 
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缩放 

如 果 页 面 上 有 很 多 元 素 ， 图 表 只 是 其 中 一 个 ， 用 户 就 会 很 难看 清 
图 表 。 和 常见 的 做 法 是 引导 用 户 旋转 至 横 屏 ， 查 看 全 屏 图 表 。 一 般 
会 隐藏 标题 和 导航 元 素 ， 尽 可 能 为 图 表 的 展示 留 出 足够 的 空间 。 
旋转 屏幕 至 竖 屏 上 时， 导航 和 其 他 控件 恢复 原状 。 

为 旋转 屏幕 查看 浸入 式 图 表 视 图 提供 一 个 视觉 吸引 ， 这 一 点 很 重 
要 。NASDAQ QMX 应 用 设计 了 一 个 旋转 手机 的 小 图 标 ， 而 SigFig 
则 在 点 击 图 表 时 显示 旋转 屏幕 的 文字 提示 。 
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图 6-31 iOS kk NASDAQ QMX: 图 标 引 导 用 户 旋 转 屏 幕 查 看 详细 视图 


图 6-32 
iOS 版 SigFig: 点 击 图 表 弹 出 旋 
转 屏 幕 查 看 详细 视图 的 文字 提示 
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[小 贴 士 ] 


要 吸引 用 户 旋转 屏幕 至 横 
屏 ， 以 查看 全 屏 的 详细 图 
表 视 图 ; 在 设备 旋转 至 竖 
屏 时 自动 恢复 导航 。 党 试 
用 缩放 或 平移 的 手势 来 扩 
展 或 缩小 图 表 的 焦点 。 


当 图 表 处 于 横 屏 模式 时 ， 用 户 可 能 仍然 想 更 仔细 地 查看 特定 时 间 
范围 内 的 图 表 详 情 。 在 雅虎 (Yahoo!) 应 用 中 ， 默 认 视 图 的 时 间 
段 为 两 周 ， 然 后 放大 到 一 周 ， 再 放大 到 两 天 ， 最 后 可 以 放大 到 一 
天 当中 的 下 午 12: 30 到 14: 20。 要 再 次 查看 更 宽泛 的 时 间 段 ， 可 
DA cE EY [RI tis as mx, FI Ae TAT o 


35.45 -0.24 (-0.67%) + 


Oct 28, 2013 - Nov 15, 2013 X 
Yahoo! Inc. (YHOO) 35.45 -0.24 (-0.6796) 十 Yahoo! Inc. (YHOO) 


迷你 

迷你 图 也 称 微型 图 ， 最 初 是 由 可 视 化 信息 设计 大 师 Edward Tufte 
提出 的 ， 他 对 迷你 图 的 定义 为 “一 个 微小 密集 、 简 单 明了 、 单 记 
大 小 的 图 表 ”。 


迷你 图 特别 适合 移动 设备 ， 因 为 它 既 提供 了 数据 趋势 或 变化 的 概 
览 ， 又 不 会 占用 太 多 空间 。 按 Tufte 的 话 来 说 ， 它 们 可 以 “ 藤 入 到 
和 句子、 表格、 标题 、 地 图 、 数 据 表 、 图 像 中 ”。 我 认为 它们 就 是 很 
小 的 图 表 。 


LJ iOS 版 Analytics Tiles 为 例 ， 上 方 的 两 个 磁 贴 使 用 了 迷你 图 来 
表示 页 面 肇 贤 量 和 访问 量 趋势 。 可 以 点 击 这 些 磁 贴 深入 到 下 一 级 ， 
查看 更 大 、 更 详细 的 图 表 。Gaug.es 也 与 此 类 似 ， 在 每 行 都 用 一 个 
迷你 图 来 表现 数据 的 趋势 。 

在 Fitbit 的 示例 中 ， 用 子弹 式 迷 你 图 显示 相对 预 设 目标 的 活动 进 
度 。 而 另 一 个 健康 类 应 用 Noom 则 使 用 微型 环形 迷你 图 指示 每 一 
餐 的 均衡 程度 。 


图 6-33 
iOS 版 雅虎 应 用 : 横 屏 视图 下 ， 
缩放 可 以 调整 时 间 范 围 焦点 


[小 贴 士 ] 

使 用 迷你 图 为 信息 增加 快 
速 直接 的 视 沉 冲击， 但 要 
通过 用 户 测 试验 证 图 表 是 
否 明 晰 。 可 以 用 迷你 图 作 
为 查看 详细 视图 的 入 口 。 


图 6-34 
iOS 版 Analytics Tiles 和 安 卓 版 
Gaug.es: 迷你 图 示例 


图 6-35 
iOS 版 Fitbit fa zc stk Noom: xf 
你 图 的 更 多 示例 
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其 入 式 图 例 


还 有 一 种 节省 屏幕 空间 的 技巧 ， 是 把 图 例 庶 入 到 图 表 标 题 或 数据 
表格 下 方 。iOS 版 Personal Capital 就 是 一 个 很 好 的 范例 。 
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许多 图 表 都 使 用 这 种 模式 表现 数据 是 在 范围 内 还 契 超 出 了 范围 ， 
是 正中 目标 还 是 偏离 了 目标 。 阐 值 可 以 用 标注 在 图 表 上 的 闫 色 、 


条 市 或 线条 表示 。 


安里 版 Battery Graph Notification FH iOS 版 MySugr Diabetes Companion 
应 用 使 用 了 常见 的 红 / 黄 /绿色 板 表 示 数 据 是 否 可 以 接受 ,或 是 否 


在 目标 沙 围 内 。 


[小 贴 士 ] 
KAKA TAY HET 
的 屏幕 空间 ， 但 在 采用 这 
种 模式 代替 独立 图 例 前 要 
考虑 可 用 性 原则 。 


图 6-36 

iOS 版 Personal Capital: 左 图 为 显 
AEP LP HRARA BG, & E 
ADA ESHER PARAR KEA 


图 6-37 
安 卓 版 Battery Graph Notification 
和 iOS 版 MySugr: 不 同 颜色 显 8% Discharging 
示 数 据 是 否 在 目标 范围 内 


Carrier 全 


《 


WEDNESDAY, 9/11/13 - THURSDAY, 9/12/13 


oO 
O 


EJ E EJ Ed E 
“agag 
mr E | uar e mE 
S ei 
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作为 用 条 带 或 线条 指示 国 值 的 示例 ，Data Usage FARE 2828 dcr E 
告 线 ， 最 上 方 的 红色 线条 显然 非常 重要 ，Anthony Lagoon 的 监测 
糖尿 病 病 情 的 应 用 用 一 个 条 融 表 示 正 和 苑 围 ， 任 何 位 于 条 这 上 方 
或 下 方 的 数据 点 都 会 被 认为 有 问题 。 


图 6-38 
安 音 系统 的 Data Usage 和 Anthony Data usage 
Lagoon 公司 的 糖尿 病 概念 应 用 : Mobile data 
JB PAH RU AC Se moie a mi 
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[小 贴 士 ] 

赔 值 对 标示 个 人 用 户 目标 
特别 有 用 。 可 以 把 阅 值 标 
记 设 计 成 交互 式 (比如 ， 
在 图 表 中 可 以 调节 阅 值 )。 
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Toshl 和 Lose It! 的 子弹 图 示例 中 分 别 使 用 了 虚线 和 彩色 线 表 示 
BE. 
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版 Lose It!: 更 多 国 值 设计 示例 
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透视 表格 
透视 表格 是 置 于 大 表格 当中 的 小 概览 表格 。 举 例 来 说 ， 在 流行 的 
桌面 和 网 页 电子 表格 应 用 中 ， 用 户 可 以 通过 拖 放 概览 中 要 显示 的 


数值 创建 透视 表格 。 用 户 可 以 在 表格 中 移动 这 些 数值 以 多 种 方式 
“透视 ”该 数据 。 


Roambi 开发 了 一 种 向 单 的 和 选 界面 ， 可 以 用 类 似 于 透视 表格 的 方 
式 查 看 数据 。y 轴 保 持 不 动 ，x 轴 可 以 选择 任何 维度 〈 选 中 项 会 用 
橙色 框 高 亮 显 示 )。 对 于 每 一 个 维度 ， 可 以 同时 选择 特定 的 类 别 。 
下 图 显示 了 Roambi 的 简便 操作 设计 : Se = ERINE, 


BR Jai Dei f xe E e DUE BRAES mJ S. BRAS 
加 一 一 项 Y 过 道 类 型 的 选择 ， 就 可 以 再 次 缩小 数据 范围 ， 只 显示 线 上 
渠道 相关 的 数据 。 


Profit : Year-Quarter 2010-Q2 Profit : Year-Quarter 2010-Q2 Bj Profit : Year-Quarter 2010-Q2 


Product Line 


Channel Type 


图 6-40 iOS 6 版 的 Roambi: 透视 表格 风格 的 筛选 
整合 
现在 让 我 们 来 看 一 些 拥 有 绝 住 图 表 设 计 的 应 用 示例 。 


Nike+ FuelBand 应 用 以 其 整洁 的 数据 可 视 化 图 表 出 色 地 完成 了 激励 
用 户 的 任务 。 其 设计 师 选 择 了 最 佳 的 图 表 形 式 ， 以 表示 不 同 目 标 
的 进度 情况 ， 同 时 避免 了 充斥 页 面 的 图 表 垃 圾 。 每 一 个 图 表 都 有 
清晰 的 标题 ， 坐 标 也 有 清晰 的 文字 标签 。 这 个 应 用 设 定 了 国 值 的 
色 板 ， 并 且 将 其 运用 到 每 个 页 面 的 设计 。 抛 开 图 表 类 型 不 说 ， 进 
度 和 表现 频谱 在 数值 低 的 一 端 总 是 显示 为 红色 ， 而 高 的 一 端 总 是 
显示 为 绿色 。 
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TENNIS 


Took on Lola today... and STILL 
remain queen of the court! 

Lola O. 
Neighborhood Swim & Tennis 


r 9 17,438 NIKEFUEL THIS WEEK 


SHARE | 


Weathertron z& 23 — 28608 A OD I aS d YU. WT obs 
Bf EAE f AN LE S| (这 一 点 在 第 8 章 中 有 相关 介绍 )， 使 

HU Pg fe rt EDU. EE en, Jim SS A BER E RT Da xt 
点 击 右 下 角 显示 出 来 ， 这 种 图 表 形式 是 显示 7 日 天 气 预 报 最 高 温 
度 和 最 低温 度 的 最 住 方 式 。 


图 6-41 
iOS 版 Nike+ FuelBand: 所 有 页 
面 中 清晰 干净 的 数据 可 视 化 设计 


iOS 版 Weathertron: 


This is your forecast day. 
It displays all the weather you can 
expect from morning to night. 


TOMORROW > 


Switch between days. 
Tapping the edges of the screen 
moves within today & tomorrow. 


TOMORROW > 


设计 精美 、 


This indicates cloud cover. 
A whiter color means there are 
more clouds in the sky. 


TODAY TOMORROW > 


Partly Cloudy 57° 


T 
| E 
| i 


TOMORROW > 


Br 


See the 7-day forecast. 
Tapping the icon below reveals the 
week's forecast. 


TODAY 


简单 直观 的 数据 可 视 化 


- Partly Cloudy 579 


These bars show precipitation. 
A larger bar indicates heavier 
precipitation. Rain & hail are blue, 
while snow & sleet are white. 


TOMORROW > 


v 


THE WEEK AHEAD 


LN 


5 | Sd s 


。 引导 原则 
少 用 文字 (Use Less Text) 、 不 要 前 置 引 导 (No Frontloading)、 给 予 
用 户 成 就 感 (Make It Rewarding)、 强 化 学 习 (Reinforce Learning) , 
倾听 用 户 的 心声 (Listen to Your Users) 


。 视觉 吸引 模式 
提示 (Tips)、 新 手 引 导 (lst Time Through)、 持 续 的 视觉 吸引 
(Persistent Invitations)、 可 发 现 的 视觉 吸 5| (Discoverable Invitations) 


在 本 书 第 1 版 中 ， 我 谈 到 了 8 种 常见 的 视觉 吸引 模式 。 但 现在 我 们 知 
道 ， 虽 然 这 些 模 式 很 常见 ， 但 其 中 没有 几 个 是 非常 有 效 的 。2012 年 ， 
KA LB T Intuit 公司 的 几 位 主要 设计 师 。 他 们 告诉 我 ， 调 查 结果 显 
示 ， 这 些 模式 中 的 大 多 数 都 在 用 户 测试 中 表现 不 佳 。 这 与 我 们 得 出 的 结 
果 一 致 。 我 和 我 的 团队 此 前 也 一 直 在 各 种 应 用 中 测试 这 些 模式 ， 其 中 包 
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视觉 吸引 模式 的 第 1 版 


FE iOS 版 RetailMeNot Iz Ei. s Hl, 


X x 


Top to get started 
THEN THIS 


Transparency Ist Time Throvah/ Tutorial Persistent Discoverable 


简 而 言 之 ， 测 试 证 明 ， 用 户 往 往 会 跳 过 或 忽略 对 话 框 (Dialogs)、 
(€ H Ie] S (Tours)、 视 频 演 示 (Video Demos) 以 及 幻灯 厂 
(Transparencies)。 往 好 了 说 ， 用 户 觉得 这 些 导 引 | 不 方便 ， 往 坏 了 说 ， 
这 些 导 引 | 会 让 下 打算 使 用 应 用 的 新 用 户 十 分 反感 。 正 如 RetailMeNot 
的 一 位 测试 参与 者 所 说 :“ 我 只 想 立刻 进入 应 用 ， 开 始 探索 。” 


所 以 我 们 根据 这 一 新 的 认识 握 写 了 新 的 一 章 。 本 和 草 的 前 半 部 分 专 
门 讲 解 如 何 创造 有 效 的 “新 手 引 导 ” 体 验 ， 也 就 是 第 说 的 引导 页 
或 着 陆 页 。 本 章 后 半 部 分 介绍 已 被 验证 有 效 的 视觉 吸引 模式 ， 包 
括 技巧 、 新 手 引 叶 、 持 续 的 视 完 吸 5|、 可 发 现 的 视 完 吸 51。 


引导 原则 


那么 ， 为 什么 对 话 框 、 使 用 向 时 、 幻 灯 片 和 视频 演示 对 新 用 户 的 
5| 叶 效 末 不 好 呢 ? 我 试 着 问 游 戏 设 计 领 域 寻求 答案 。 游 戏 设 计 师 
们 向 来 都 懂得 ， 你 不 能 把 新 玩家 直接 笃 到 枪林弹雨 之 中 ， 指 望 他 
们 乐 在 其 中 。 大 多 数 玩家 还 来 不 及 搞 铺 怎么 开火 反击 就 死 掉 了 。 


在 游戏 设计 中 ， 一 些 推动 深度 互动 的 方法 要 比 其 他 方法 奏效 得 多 。 
在 移动 应 用 中 ， 情 况 也 是 一 样 。 虽 然 重 要 关头 不 涉及 虚拟 的 生死 
存亡 ， 但 用 户 在 茫然 无 措 的 情况 下 所 体验 到 的 挫折 感 古 一 样 的 。 
如 果 你 的 很 多 用 户 都 有 这 种 挫败 的 感觉 ， 那 么 你 的 应 用 就 完蛋 了 。 


《额外 加 分 》(Extra Credits) 在 线 视频 系列 从 内 行 的 角度 深入 解 
析 了 游戏 世界 的 各 个 方面 。 基 设计 团队 制作 了 一 集 非 稼 棒 的 视 
n, PUE 《教程 101》 (http://www.youtube.com/watch?v=BCPcn- 
Q5nKE)。 我 相信 每 个 应 用 设计 师 在 看 了 这 部 教程 之 后 都 会 受益 菲 
浅 。( 忽 略 视 频 里 那 烦人 的 花 和 栗鼠 声 似 的 旁白 吧 ， 这 部 片子 值得 你 
这 么 做 ,) 


《教程 101》 罗 列 出 了 一 些 打 造 高 效 的 游戏 ?| 寻 的 基本 原则 s 


。 少 用 文字 
。 不 要 前 置 引导 

。 让 引导 更 好 玩 

。 在 游戏 中 强化 学 习 
。 倾听 玩家 的 心声 


我 们 将 抛 开设 计 模 式 ， 用 这 些 原则 作为 参照 ， 打 造 出 一 个 超 赞 的 
引导 (为 适用 于 应 用 ， 我 们 对 这 些 原 则 做 了 少许 调整 )。 随 着 我 们 
深入 探讨 这 些 原则 ， 你 就 会 明白 为 什么 本 书 第 1 版 中 的 大 多 数 视 
觉 吸 引 模式 没 能 有 效 地 帮助 用 户 从 应 用 中 歼 得 更 深层 、 更 丰富 的 
体验 。 


图 7-2 

Portal 为 新 玩家 设置 了 一 个 安全 
的 环境 ， 让 他 们 在 正式 进入 游戏 
前 熟悉 各 种 操作 方法 


引导 和 视觉 吸引 | 195 


[小 贴 士 ] 

抑制 自己 使 用 文字 的 冲动 ， 
能 用 图 像 表 现 ， 就 不 要 用 
文字 描述 。 用 文字 来 指出 
“ 因 ”， 然 后 让 用 户 通 过 操 
作 观 察 “ 果 ”。 


图 7-3 
iOS 版 Ness: 注意 这 里 在 用 文字 
解释 操作 和 效果 ， 而 不 是 鼓励 用 
户 操作 ， 让 他 们 自己 观察 效果 


原则 1: 少 用 文字 

当 我 们 想 要 解释 一 件 事情 的 时 候 ， 文 字 通 第 是 最 人 简单 的 工具 。 但 
如 琳 我 们 想 可 了解 一 件 事 ， 却 经 常 不 愿 采用 文字 这 种 途径 。 
《教程 101》 指 出 ， 我 们 应 该 避免 只 依赖 文字 进行 讲解 ， 因 为 “ 阅 
读 文 字 速 度 很 慢 ， 而 且 会 破坏 侵入 云 体 时， 此 外 ， 那 些 了 最 需要 5 
导 的 玩家 反而 季 冲 跳 过 文字 5| 寻 。 

使 用 太 多 的 文字 古 一 种 “说 而 不 秀 ”的 方法 ， 这 与 移动 应 用 的 优 委 
相 违 育 。 相 反 ，5 引 导 应 该 是 “ 秀 而 不 说 ”一 应 该 具有 交互 性 ， 这 和 样 
用 户 可 以 通过 操作 来 学 习 。 如 时 我 们 预先 练习 过 操作 ， 而 不 仅仅 是 
被 告知 如 何 做 ， 那 么 我 们 在 需要 的 时 候 就 会 更 容易 记 住 这 些 操 作 。 


“ 少 用 文字 ”原则 并 不 意味 着 用 文字 永远 是 错 的 ， 或 者 说 ， 文 字 总 
是 越 少 越 好 。 总 体 而 言 ， 它 指 的 是 在 你 想 吸 引用 户 进 一 步 体 验 的 
时 候 ， 应 该 首先 考虑 减少 文字 ， 增 加 交互 。 


下 面 对 比 了 一 些 违 背 了 此 原则 与 采用 了 正确 方法 的 应 用 。 第 一 组 对 
比 的 是 两 个 美食 应 用 。Ness 通过 文字 说 明 而 不 是 操作 演示 来 介绍 定 
制 化 页 面 ， 这 样 用 户 要 经 过 元 长 的 流程 之 后 才能 进入 应 用 。 相 反 ， 
Foodspotting 则 让 用 户 直接 上 手 使 用 应 用 ， 其 界面 上 只 使 用 了 几 个 
行为 如 唤 操 作 的 提示 ， 用 户 可 以 轻松 开始 体验 ， 不 需要 文字 导 引 。 


还 有 类 似 的 其 他 示例 ， 展 示 了 在 这 方面 设计 优秀 的 应 用 和 效 采 和 宵 
3 — ZEB Jer Hl o 


Ness 和 Foodspotting 


v2 | 


Tap 9 to change 
cuisine or price 
Ness predicts how 
much you'll like each 
restaurant. 


Tap © to change 
mealtime 


Tap 9 to change 


^ Next 
location 


Next 


图 7-3 (28) 

iOS 版 Ness: 注意 这 里 在 用 文字 
解释 操作 和 和 效果， 而 不 是 鼓励 用 
户 操 作 ， 让 他 们 自己 观察 效果 


Swipe card DIRECTIONS CALL 
up for more 
info 


Share Details 


Ness learns your tastes 
as you Dismiss, Save, 


Swipe card 
down to 
Got it! save 


and Rate places. 
MESSAGE 


e 


CANCEL 


Got it! 


i pauitilton via Instagram 


eoooo T-Mobile @ 2: 8:57 AM © 717*  eeoooT-Mobile + 11:06 PM C» 8 图 P3 
m Q Best G m CQ C iOS 版 Foodspotting: 一 个 非常 
简单 的 应 用 ， 让 用 户 直接 深度 体 
Cheese w, 无 需 引 号 


at Antonelli's Cheese Shop 


Finding the best dishes 


9 Near Central Austin, Austin Q9 Near Central Austin, Austin ©) 


图 7-5 
安 卓 版 Boomerang: 文字 太 多 (也 
见 原 则 2 ) 


图 7-6 
iOS 版 Mailbox: 引导 页 的 文 
字 说 明 鼓 励 用 户 边 操 作 边 学 
7] (http://www.youtube.com/ 
watch?v-URd0j 5vEsHE ) 


Boomerang 和 Mailbox 


> < tting Started! 


1153AM 


awesome interview on TGD 
— 


t T Lewe Na beca ve th eat ve 


Mowestoe feast Mar 15 


Welcome to 
Boomerang for Android! 


Let’s show you how it works. 


e ooooooo0oo0 


Ta 


f^. 


^ 


x tting Started! PREVIOUS NEXT 


Send laten? la this for reat? 


Yes! Write an email now, and we'll 
send it for you later, even if you turn 
off your phone or lose signal. 


b 
f’  ©00008000 
; 
f^. c 


screenshot 
x tting Started! PREVIOUS NEXT 


Seas men 
* awesome interview on TGD 
Mew op e 


Mw did Verena Ivi (owe Ron bon imp gres onte 


Moveatia Coast Mor 15 


Now, what about 
suing left? 
Swipe to the left to reveal more actions! 


: z 


入 


x tting Started! PREVIOUS NEXT 


Get reminded about 
the emails you send. 


You can also choose to be reminded 
only if there was no response. 


b 
x J| 0000 009e900 


大 > 一、 


x tting Started! PREVIOUS NEXT 


Mone options for youl 


You can Archive, Delete, Boomerang, 
Label, Mark as Read, or Star from here. 


pe 
y ^. 0000900000 
i 2 


— 
ne — 


x tting Started! PREVIOUS NEXT 


-— 
Summer sublet 


‘That woud be rest! Mir vos s S onting nr en 

Saran tent 115348 
© awesome interview on TGD 

Me 6d i mmni A" Lowe a ben Nip agre idc onte 


—— tent 15349 
© Reminder for 2nd Annual Taco Festival 


Select messages in bulk! 


Press and hold a message to activate 
multi-select. After that, you can select 
more just by tapping. 


\ 
í .oooooooeo 
P. 


A orm. 


Welcome to Mailbox 


There are five zones in Mailbox, and you 
swipe messages to move between them 


New Mail 


EIGEIBE 


Get Started 


Swipe Right to Archive 


Archive lives to the right of Mailbox. 
Try archiving the message below. 


Evory Morgans Hi Lucia. > 
yo San Fi 4 


Great Job! 


You can quickly access your archive 
from the navigation bar and in the 
“All Mail” folder in Gmail 


Next 


CA <7] 
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DigiCal 和 Fantastical 


a ee eee 


Beautiful Widgets Intuitive Design Help & Support 


November 
: , 


Add event 


There's a help page for every view 
in the app in the menu. Feel free to 
email us on digical(odigibites.nl if 


View events directly on the Swipe left or right to navigate 
you need further assistance. 


home screen 


eo T-Mobile > 10:12 AM > T-Mobile + 10:12 AM ee T-Mobile = 10:12 AM 


November 2013 November 2013 Nover@r 2013 


Welcome 
Finally, tap the red title bar to 
start using Fantastical. 


To get started, pull down on 
the DayTicker until it switches Hint: Tapping the title bar goes 
to the calendar. 3 E 
Now, pull down on the to Pd n esa DD 
calendar until it Switches back p ME 
to the DayTicker. 


Catch 和 Clear 


Orsanize your notes 


Make a note SAare your notes 


into Spaces 


图 7-7 
安 卓 版 DigiCal: 文字 与 其 描述 
的 操作 分 离 


图 7-8 

iOS 版 Fantastical: 文字 说 明 引 导 用 
户 用 手势 操作 Chttp//www.youtube. 
com/watch?v=e6Q8FbuNwiQ ) 


图 7-9 
dem JW Catch: 全 局 游览 描述 了 
功能 和 操作， 但 没有 让 用 户 试用 


KB Clear: 默认 视图 预先 设 
置 了 任务 列表 ,让 用 户 边 做 边 学 
习 如 何 使 用 ( http://www.youtube. 
com/watch?v=v3gGTG003_A ) 


bbile > 5:15 PM > bbile = 5:15 PM 


10S 版 SlideStory: 这 个 引 T 有 vs Q ' How To Control How To Control 
图 示 也 有 讲解 ， 但 没有 让 用 户 实 
际 操作 


iOS 版 Vine: 有 图 示 和 文字 介 


| Sw 
s =>) am) 


作 (http://www.youtube.com/ NS toVine? 


G 10:19PM 


to make your first post. 


watch?v=vBOC9DpCSns ) We can walk you through how i». | 9 \ 


-一 一 


) P 


med N 


| Vine records only when your finger is 

| on the screen. Press and release at \ 
| different times to assemble videos like 

i this one. | 


OK 


Skip the tutorial. 


原则 2: 不 要 前 置 引 导 

《额外 加 分 》 市 目 在 《教程 101》 中 说 道 :“ 如 果 你 一 上 来 就 进行 讲 
解 ， 事 无 巨细 地 引导 你 的 玩家 ， 他 们 束 会 被 信息 的 海 详 痊 设 ， 设 
有 动力 玩 下 去 了 。” 你 只 需 把 这 和 句 话 里 的 “玩家 ” 换 成 “用 户 ”， 
其 相关 性 对 于 应 用 设计 师 来 说 是 显而易见 的 。 

WERKE AA, KE, FRR, RKE E ix 
计 出 有 用 功能 ， 自 然 希 望 用 户 能 够 马上 知道 这 个 应 用 都 能 做 什么 。 
抑制 住 这 样 的 冲动 。 正 如 《教程 101》 视 频 中 指出 的 那样 ， 前 置 引 
导 会 熄灭 用 户 的 热情 ， 让 他 们 跳 过 你 的 引导 。 而 且 ， 用 户 一 旦 跳 
过 引导 ， 就 不 大 可 能 从 你 的 应 用 中 有 所 收获 ， 也 不 大 可 能 癌 其 他 
人 推荐 你 的 应 用 。 


在 用 户 需要 时 为 他 们 提供 简单 易 懂 的 信息 ， 而 不 要 让 他 们 被 那些 
等 到 用 时 几 近 忘 光 的 信息 所 淹没 。 记 住 ， 你 在 党 造 第 一 印象 。 为 
什么 不 在 初 见 之 时 留 给 用 户 意犹未尽 的 感觉 ， 而 要 让 他 们 就 此 止 
步 呢 ? 


限制 前 置 引 时， 只 对 主要 功能 做 个 彻 步 介 绍 ， 以 便 让 你 的 用 户 潜 
心 进入 ， 快 速 上 手 。 后 面 磁 到 的 视觉 吸引 能 激发 他 们 探索 更 高 级 
的 特性 和 功能 。 


让 我 们 对 比 几 个 擎 担 了 要 领 的 应 用 与 不 得 要 领 的 应 用 。 


首先 ， 我 把 iOS 版 Phoster 和 Windows Phone 版 Creative Studio 放 
在 一 起 进行 对 比 。Phoster 采用 了 一 张 混乱 的 引导 页 耐 ， 上 面 塞 满 
了 用 户 需 要 了 解 的 所 有 说 明 。 无 论 何 时 ， 用 户 想 要 查阅 一 项 操作 ， 
都 必须 费力 地 把 通 篇 的 说 明 阅 读 一 遍 。 


对 比 来 看 ， 使 用 Creative Studio 处 理 一 张 图 片 时 ， 只 有 在 用 户 选 中 
了 一 个 工具 之 后 ， 才 会 显示 出 操作 说 明 。 在 示例 中 ， 我 打开 一 张 
图 片 ， 选 择 “ 肾 焦 ” 效 果 ， 然 后 我 会 被 引导 到 一 个 两 步 处 理 流程 。 
预览 了 处 理 效 果 之 后 ， 我 决定 继续 编辑 一 下 ， 在 点 击 “ 编 辑 ” 项 
后 ， 我 会 看 到 另 一 个 相关 的 情景 化 提示 。 


[小 贴 士 ] 

不 要 预先 告知 用 户 可 能 
到 的 所 有 信息 ， 否 则 他 们 会 
不 堪 重 负 ; 把 信息 分 成 小 
块 ， 当 用 户 需 要 时 再 显示 。 
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Phoster 与 Creative Studio 

图 7-13 
iOS 版 Phoster: 尽管 只 有 一 页 引 
F, 但 混乱 的 布局 预先 展示 了 太 


多 信息 


{yo 
Select A template 
Import photo @Xs 


lmage transform e 
To Aust 
color options 

m available 
Edt Yo m: 
xw; Movable» Text <3 


font Size PN yl 
Adjustable TyPeface 


图 7-14 
Windows Phone 版 Creative Studio sus 
适时 为 用 户 提供 情景 化 帮助 


STEP 2/2 


> ) 


focus object 


Dooo5Todoist 


WELCOME! 


D000 allows you to quickly 
Create Tasks & Notes with 
PHOTO, VOICE, DRAWING, LOCATION 


Swipe to Begin 


UNSOLVED 


SECRET NOTE 


NICE PLACE 


COOL SONGI! 


APP DESIGN IDEA 


SWIPE RIGHT ON A TASK TO SET PRIORITY 


CALL MOM 
CHRISTMAS GIFTS FOR... 
BUY THIS ONE a 


SPONGE CAKE RECIPE 
EGG, BAKING POWDER, 
FLOUR, VANILLA EXTRACT 
MILK, SUGAR 


SECRET NOTE 


NICE PLACE 9 


COOL SONG!! $ 


APP DESIGN IDEA 


ORGANIZE YOUR THOUGHTS EFFICIENTLY 


UNSOLVED 


OIL CHANGE 


After 24hours, Your tasks will 
automatically leap sideways to 


the “UNSOLVED” column. ( You can 
change the term '24hours~Month’ 
when you add a task } 


€» €9C3 


TASK LOCK 


USING’ @ ‘TO ATTACH THE 
LONG TERM TASKS IN 'TODAY' COLUMN 


USING VOICE RECORDER WHEN 


YOU'RE DRIVING OR URGENT SITUATION 


LONG PRESS THE LIST TO 
EDIT, DELETE AND REORDER 


LONG PRESS TO 
"EDIT" "MOVE" "NOTE" 


D000 PROVIDES MANY OPTIONS FOR 
INPUTTING THOUGHTS, INCLUDING PHOTOS, 
LOCATIONS , DRAWINGS, & VOICE RECORDINGS 


图 7-15 
iOS 版 Dooo: 排山倒海 似 的 前 
置信 息 没 完 没 了 (总 共有 11 页 ) 
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图 7-16 
iOS 版 Todoist: 一 个 气泡 提示 邀 
请 用 户 添 加 第 一 个 任务 ， 随 后 另 
一 个 提示 介绍 了 菜单 选项 


图 7-17 
安 卓 版 Buy Me a Pie!: 4A AR 
的 、 脱 离 了 情景 的 前 置 引导 


图 7-18 
Windows Phone 版 OneNote: 列 
出 两 个 示例 列表 ,使 用 户 可 以 在 
实践 中 学 习 
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e0000 T-Mobile F 


= Today + 


e000 T-Mobile > 10:33 AM ; D 10:35 AM 


; WP: 


@0000 T-Mobile = 10:36 AM 


= Today 


You can do it. 


Enter with Google Account 
No tasks for today. 


! Enjoy your morning. 
Sign up with Email 


Login 


Early lunch 


3pm meeting Jessica R 


Buy Me a Pie! EjOneNote 


O EEEE EO 


PM 


123} 


Add amounts to groceries 


Enter items one by simply using this button. 


one or many at 
once divided by 
comma. 


Grapes : 2lb, milk 


um mv 
CHEM 


Color label your items to group them the 
way you like. 


um Samum 


Use this icon = to add items from the 
dictionary. All items added to your lists are 


stored automatically in it. Tap and hold an item to edit or delete it. 


| Rice 


Chocolate 
Apricot 
B Ap ^ 
E bool C | orange juice 
pples D 


Disponible en 
la version PRO 


Syncing with SkyDrive... Last synced a minute ago 


ONENOTE < QUICK NOTES 
Quick Notes Sample shopping list 
Groceries 
=. v. Milk 
|) Welcome to OneNote V Bread 
Red apples 
a Sam le tri lan Chocolate ice cream 
J p p p vV. Tomato soup 


m : : Party supplies 

L Sample shopping list | | Paper plates and napkins 
V Balloons 
| | Banner 


® © ® © 


Syncing with SkyDrive... 


< QUICK NOTES 


Sample trip plan 


Flight number: XY 0011 
Flight reservation: WQ234R 
Hotel reservation: ABC12345 


Places to visit: 
v^ Statue of Liberty 
v. Empire State Building 
Central Park 


F , Á y y; 
1 = , 人 y, A / 
1 
: / / [m y ( 
E X = : $ 
p / "CORE 
/ ^ ad $ \ | 
ES / nE S SE 
e / X 4 ^d 
7 E VY ; d 7 
s 


Clipchat 与 Kik 


Welcome to Clipchat 


Matt Ki 
y; ^ M 


. T-Mobile $ — 6:02PM 
e in 
We just found a fellov 
ikster in your 


We just found a fellow à mes: tap "Add* to 
Kikster in your phone's add them to ontacts — 
‘® Jake Burkett Wed @ 6:02 PM 
> *** We just found a fellow m 
Kikster in your phone's @ We just found a 


fellow Kikster in your 


e Verda Goff phone's address book. 
Find Friends on Kik? Qo > *** We just found a fellow To start a conversation 
Kikster in your phone's. with Matt, simply send 
which of your gov already have Richard Will H them a message! 
€ > *** We just found a fellow 
Kikster in your phone's. 


Upload your address book to tell you B 
No Thanks Yes e 
just found a fellow 
er in your phone's. 
€ — Robin Raszka 
> *** We just found a fellow 
one's. 


Kikster in your ph 

e. Wade Skelton 
b * We just found a fellow 
Kikster in your phone's. 


© gy Adam Connor 


原则 3: 给 予 用 户 成 就 感 

实际 上 ， 你 可 能 记得 在 《教程 101》 中 这 个 原则 叫 作 “让 引导 更 好 
玩 ”。 但 说 真 的 ,“ 好 玩 ” 并 不 适用 于 所 有 的 应 用 。 视 频 解 说 员 说 
“你 的 游戏 引导 应 该 像 游 戏 中 的 其 他 部 分 一 样 引 人 入 胜 ”， 我 们 可 
以 触 类 旁 通 ， 意 识 到 这 条 原则 也 适用 于 移动 设计 领域 。 

即使 我 们 不 能 让 新 手 的 学 习 过 程 变 得 有 趣 ， 也 仍然 有 一 些 方法 让 
这 一 过 程 宣 有 成 就 感 ， 并 使 之 完全 融入 到 应 用 的 整体 体验 当中 。 
一 个 比较 好 的 做 法 是 实时 交互 ， 让 用 户 实 际 完 成 操作 。 这 样 做 能 
产生 一 种 巩固 了 所 学 内 容 的 感 沉 。 

就 算 “ 好 玩 ” 不 是 我 们 的 目标 ， 但 有 时 在 引导 中 融入 一 种 趣味 性 
也 很 不 错 。 下 面 ， 我 们 首先 对 比 NBC News 与 Flipboard。 这 两 个 
应 用 对 此 采用 了 不 同 的 方法 ， 后 者 是 正确 方法 的 典型 郊 例 。 


NBC News 与 Flipboard 
尽管 NBC 的 五 个 幻灯 片 3 引导 页 的 字体 都 挺 “ 有 趣 "， 但 仍然 让 人 觉得 


图 7-19 
iOS 版 Clipchat: 太 多 前 置 引导 
人 信息， 脱离 了 使 用 情景 


图 7-20 

iOS 版 Kik Messenger: 导入 联系 
人 后 即 可 看 到 一 个 怎样 与 他 们 开 
始 聊天 的 提示 
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像 本 教材 。 相 比 之 下 ， 第 一 次 打开 Flipboard 就 有 种 截然 不 同 的 感觉。 


图 7-21 
iOS 版 NBC News: 采用 了 一 种 
dy M BD 7 AE 、 
有 趣 的 字体 ， 但 文字 兄长 得 让 人 THANKS FOR NOW THERE'S 
te f 起 兴趣 READING MORE FOR YOU TO 
READ! 


NBC NEWS! 


HERE'S A QUICK SEARCH FOR ANY WHEN YOU GET TO THE 
RUN DOWN OF THE TOPIC BY TAPPING BOTTOM OF THE LIST, 
NEW FEATURES! MORE STORIES WILL BE 

CAN SEE THE NEW FEATURES AT ON THE SEARCH ADDED SO YOU NEVER 

Me TIME BY Stic RRR NS NEW" ICON RUN OUT OF NEWS 


NEXT <> NEXT c» NEXT c^ 


C 


DOTS NEXT TO STORIES SWIPE LEFT OR 
LET YOU QUICKLY SCAN RIGHT ON THE 


FOR STORIES YOU 
HAVEN'T READ YET STORIES IN THE 


in LIST TO SEE 
€ THIS DOT SHOWS THAT THIS IS A SHARING AND 
STORY I HAVEN'T READ YET SAVING OPTIONS 


NO DOT MEANS THIS IS A Seno eat su 
STORY I'VE ALREADY READ ab Voas 


NEXT o> NEXT o> 


图 7-22 
dt Æ M Flipboard: 用 有 趣 的 
嵌入 式 提 示 吸 引用 户 ， 并 强化 
了 这 种 用 于 应 用 导航 的 关键 手 
4 ( http://www.youtube.com/ 
watch?v=rQA SZtuvBCs ) 


Flipboard 
Flipboard 


Welcome to ~ 
Flipboard 
You can see everything from here 


Get Started Sign In 


Flipboard 人 没有 文字 说 明 ， 但 页 面 下 半 部 分 顽 诺 地 加 上 翻 起 ， 挑 喜 
你 在 翻 到 下 一 页 前 脑 一 眼 那 里 的 内 容 。 再 看 一 次 ， 你 可 能 就 明日 了 
那个 扣 示 的 含义 一 同上 背 动 查看 隐 忠 的 内 容 。 但 如 霖 此 时 你 没有 请 
动 ， 就 会 出 现 一 个 舱 入 式 的 视 早 吸 5|， 写 着 “向 上 背 动 以 继续 。 


随后 的 每 个 天 AARE ABRE TUR PERR Flipboard 内 容 时 需 
学 会 的 请 动手 势 。 这 既 有 趣 ， 又 有 成 就 感 。 


Noom 和 DailyBurn Tracker 
Z hk Noom 是 一 个 不 可 思议 的 应 用 ， 在 使 用 给 了 予 成 就 感 机 制 深度 
吸引 用 户 方面 做 得 非常 不 错 。 体 验 设计 从 头 至 尾 都 很 敌人 ， 使 得 用 
户 会 反复 使 用 应 用 。Noom 采用 了 “升级 ”的 游戏 化 技巧 (参阅 第 
8 章 ) ， 激 励 用 户 成 功 完成 一 系列 任务 ， 达 到 下 一 级 所 需 水 平 。 


它 还 运用 了 一 个 让 应 用 始终 有 趣 的 “惊喜 ”元 素 。 完 成 程序 设置 
后 ， 我 马上 获得 了 一 个 “优胜 者 奖 "， 激 励 我 再 接骨 历 。 


Welcome to Noom Weight Loss 
Coach! 


Keep enjoying real 
food, not diet food. 


Get moving with 
activities you enjoy. 


Lose weight with 
pg coaching that works. 


Set Up Weight Loss Plan 


Compiling your plan 


心 


Create Your Profile Set Up Weight Loss Plan 
A 
” GQ 


What's your 
nickname? 


Theresa 


Done 


Set Up Weight Loss Plan 


You're all set! 


Over the next 4 days, Noom will 
get to know you better through 
food logging & activity tracking. 


Get your next task 


LEVEL 


Set up your weight loss plan Choose program 


intensity 
This will affect how hard your diet and 


exercise tasks get, and how quickly you'll 
lose weight as a result. 


Easy y 


EE] create-your profile 


Average 


Intense 


Noom Coach 


COACH 


The Key to Weight Loss 


You don't have to do grueling workouts to 
lose weight. When it comes to weight 
loss, food is the real key. 


L Setupyour weightloss plan 


Gl BD 
oo 
wy 


Friday, September 27 


0/1200 Cal 


Pick a meal you recently ate to 
practice logging. 


Breakfast 
Morning Snack 
Lunch 
Afternoon Snack 


Dinner 


LA Protein shakes 


EASY UNITS PRECISE UNITS 
—————————34 
0 
EN 0 bottle (10 fl oz) 
2 .25 cup 
190 calories Suggest Units 
Protein Shakes Miscategorized? 


* This category includes protein shakes, diet 
Shakes and smoothies. 

* Be careful, research indicates that most 
calories consumed in a liquid form tend to 
add to your calorie intake rather than 


eiihctitiito ar doeroaco 


Meal Log Add Food Item Breakfast Analysis Your Calorie Budget 


You consumed 


407 Cal 


Exercise is Hard 


Your Breakfast Ideal Exercise doesn't burn as many calories 
as we think, so it's hard to create a deficit 
with it. To burn off all your meals from 
one day, you'd have to run a half- 
marathon! 
0% 100% 0% 50% 35% 15% 


Consider adding more green foods to your 
Breakfast to feel fuller. 


©- Ñ 


1 Cupcake Walk 4 Miles 


eS ee 


7-23 
安 卓 版 Noom: 引导 设置 轻松 友 
好 ， 始 终 伴随 着 正面 反馈 


图 7-24 

4 XJK Noom: 为 确保 用 户 理解 ， 
将 任务 设计 成 参与 式 ( 比如 练习 
记录 一 餐 所 吃 的 食物 ) 


k 
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7-25 
Noom Coach Play with the pedometer 


安 卓 版 Noom: 任务 开始 时 容易 be 
完成 ， 但 难度 随 着 进度 加 大 ; 升 CO Keep me with you 


The built-in pedometer counts steps all 
day. Just keep the phone in your pocket, 


级 让 体验 游戏 化 ， 也 带 来 更 大 的 . oer es 
^ y with the pedometer purse or elsewhere on you. Don't worry, it 
级 Lk AL J x , H Lj won't drain your battery. 
> M Activity Tracking: Day 1 of 4 
成 就 感 ° 
One meallogged 
00 Cal m 


Overachiever Bonus 
Would you like the Coach to add a 
onus task to your list? 
This is optional, but can give you a 
head-stai tomorrow if you feel 


s! n 
like doing a little more today. 


No thanks Yes 


口 Notify me when I do well 


[小 贴 士 ] 

如 果 你 现在 下 载 安 音 版 Noom 的 话 ， 可 能 会 发 现 最 新 版 与 上 面 的 截 
图 (2013 年 10 月 ) 有 些 不 同 。 我 很 好 奇 是 什么 促成 了 这 些 变 化 ， 
于 是 联系 了 Noom 的 项 目 副 总 裁 Eli Holder, 


Eli 说 ， 用 户 测试 显示 ，2013 年 版 的 设计 让 参与 者 感到 “ 精 疲 力 
尽 ”。 改 版 的 目的 是 把 着 陆 流 程 分 割 成 若干 小 步骤 ， 使 之 不 大 像 一 
个 任务 列表 ， 而 是 更 贴近 用 户 的 真实 减肥 经 历 。 

今年 请 继续 关注 Noom， 因 为 Eli 和 他 的 团队 改进 了 着 陆 流 程 ， 目 
的 是 更 迅速 地 带 给 用 户 愉 悦 的 体验 ， 让 用 户 与 Noom 之 间 建 立 起 情 
感 联系 。 


相 比 之 下 ， 设 置 DailyBurn Tracker 的 过 程 非 常 繁 琐 。 一 上 来 就 有 
6 个 设置 页 面 ， 然 后 让 我 直接 进入 有 10 个 选项 列表 的 首页 。 没 有 
引导 ， 疫 有 激励 机 制 ， 疫 有 惊喜 。( 对 于 激励 型 应 用 ， 人 惊喜 是 很 有 
用 的 。) 


Sedentary 
lam seated most of the day. 


Weight 138 LBS ] Goal 130 mum | Height 5 feet 7 inches 
9 ded dod ee eee x — 
1am standing most of the day. 


Medway Active 
am walking most of the day, 


lanti bais Active 


always moving around and active. 


Extremely Active 
I have a very labor intensive job/lifestyle. 


4 feet 6 inches 
5 feet 7 inches 
6 feet € 5 


TRACKER 


TRACKER 
whee t loss and the less active rJ Track Nutrition Ba Track Nutrition 
Tap 1o Chock J —À > 
You're over your goa! by 459 cals 


Track Workouts e Egg, phon, cooked, hard-boiled (... Workouts 
nn. s ee 
—Ü( M. Blueberry Muffins 
Taea ES , Track Weight 
Y Today's Weigh-In: 196 fos > Con v Today's Weigh-In; 135 lbs > 
Balanced 
Lunch 


xa View your Progress > C Fish, salmon, Atlantic, wild, raw (.. as Vi oii roaa n 

Fa More DailyBurn Apps > MRNA MN ale Fi More DailyBurn Apps > 
1 bering = 

PRO | Upgrades > @ t Pren: 4 iL Upgrades > 
Jens Beet Salad 

aul Invite your friends > oder : alam Invite your friends > 

E check-in Reminders > BE check-in Reminders > 


原则 4: 在 使 用 — 


Xi RHERFEW E, I4uünb— A al RE SCUS BEAT É —^ 7 BEBJEN. 
RARE NEM: SERIE EE 
当然 ， 老师 已 经 讲解 过 那个 概念 ， 但 是 ， 你 正 是 通过 自己 做 实验 
才 真 正 学 会 了 它 。 


同样 的 观点 也 适用 于 引导 。 如 果 你 遵循 了 前 三 条 原则 ， 那 么 这 个 强 
化 过 程 就 会 是 自然 而 然 的 了 。 很 简单 ， 比 如 在 引导 中 讲解 一 项 操作 
时 ， 附 加 一 个 微小 的 视觉 或 听觉 上 的 反馈 。 然 后 ， 当 用 户 以 后 进行 
这 项 操作 上 时， 同样 的 反馈 会 强化 他 学 到 的 东西 。( 如 果 你 确定 使 用 
声音 反馈 ， 记 着 提供 一 个 关 掉 声音 的 方法 ， 以 免 用 户 在 熟悉 了 你 的 
应 用 之 后 对 音效 产生 反感 。) 


XM em “ABER Sl” ”原则 的 补充 。 不 要 试图 一 次 性 把 
你 的 应 用 一 展 无 余 ， 可 以 考虑 设计 一 种 引导 用 户 循序 渐进 的 浸入 
式 应 用 体验 。 还 可 以 随 着 时 间 的 推移 展示 更 高 一 级 的 功能 ， 或 者 
发 放 意 外 “奖品 ”以 资 鼓励 。 通 过 这 些 方式 ， 你 会 帮助 用 户 在 使 
用 应 用 的 同时 强化 学 到 的 内 容 。 


图 7-26 
iOS 版 DailyBurn Tracker: 设置 
过 程 就 像 做 枯燥 乏味 的 家 务 


[小 贴 士 ] 

用 你 营造 的 成 就 感 使 应 用 
更 具 魅 力 。 可 以 考虑 适时 
增加 趣味 性 元 素 ， 并 让 用 
户 通过 动手 练习 获得 “经 


[小 贴 士 ] 

学 习 不 是 一 次 性 的 ;在 使 
用 应 用 的 过 程 中 ， 应 该 巩 
固 用 户 在 引导 中 了 解 到 的 


Airis 
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图 7-27 
iOS 版 Polar: 做 了 几 个 问卷 调查 
之 后 ， 我 看 到 了 一 条 提示 ; iOS 
版 DuoLingo: 参与 即 奖励 宝石 


Polar Tip 


Skip a poll you’re not interested 


in by swiping across it. 


More Info OR 


T-Mobile 3 10:27 PM 


OK Thanks 


You Earned 5 Lingots 


Learned the skill Basics 2 


Reached level 3 


图 7-28 
de JR Any.do: 用 小 部 件 鼓 励 用 
户 进行 互动 ， 完 成 任务 时 上 自动 给 
予 奖励 


+ MER AMEME. NC 


Google 


[+] 


Wunderlist Drive 


Plan your day 


Any.do Moment 


pea 


1 TASKS 


o GC © 


CANCEL SNOOZE 


—— DÀ 


PLAY 


ET 


JODO] 


TODAY 


+ 
Call back 14028614960 v 

CALL 
Update website 


Gestures article 


Gr online futura onmneante f" 
reenumngTuture concepts ^ 
Bank e 
sank ww 
ff ^ra 
Jefi prez x) 
MA laciecnar (en 
Viz designer ^, 


GREAT JOB! 


You've earned a kiip reward! 


210 | #72 


原则 5: 倾听 用 户 的 心声 
想 一 想 ， 你 潜心 开发 并 打磨 你 的 应 用 已 达 数 月 之 久 ， 那 么 谁 是 向 
用 户 盖 述 其 操作 程序 的 最 佳人 选 呢 ? 


可 能 不 是 你 ， 根 据 《 教 程 101》 中 讲解 员 的 说 法 :“ 你 身 为 一 名 设 
计 师 ， 已 经 为 一 个 项 目 工作 了 一 两 年 之 久 ， 这 时 候 你 很 容易 把 其 
实 非常 费解 的 难题 看 成 直观 或 显而易见 的 事情 。” 


长 期 接触 一 个 应 用 会 使 我 们 弄 不 清 用 户 使 用 时 需要 先 和 掌握 哪些 要 
领 。 关 于 这 一 点 ， 我 们 会 在 第 10 章 中 进行 讨论 。 但 是 现在 要 记 
fk. 在 衡量 你 的 引导 效果 的 时 候 ， 只 有 你 的 用 户 (或 游戏 领域 里 
的 玩家 ) 才 是 唯一 可 靠 的 人 选 。 


简单 适当 的 用 户 测 试 能 暴露 出 应 用 使 用 过 程 中 的 任何 障碍 。 观 察 
你 的 用 户 ， 看 看 他 们 在 哪里 绊 住 了 ， 在 哪里 磁 到 了 问题 。 倾 听 他 
们 与 应 用 互动 时 的 评论 ， 稍 后 再 同 他 们 提问 。 如 果 在 他 们 使 用 应 
用 的 时 候 提 问 ， 你 很 可 能 会 不 自觉 地 引导 他 们 说 出 你 想 要 的 答案 。 


这 就 引出 了 《额外 加 分 》 专 家 列 出 的 后 儿 个 技巧 : 


。 不 要 到 最 后 再 设计 引导 。 
你 必须 从 一 开始 就 把 引导 融入 整个 设计 过 程 。 很 多 团队 把 5 引导 
放 到 最 后 再 添加 ， 这 实在 是 大 错 特 错 ， 其 至 有 可 能 损害 你 的 应 
用 的 命运 。 本 革 指 出 的 许多 反 模 式 引 导 页 可 能 就 是 由 于 事后 设 
计 造 成 的 ， 这 些 应 用 本 映 设 计 得 并 不 差 。?| 寻 应 该 被 当 作 应 用 
设计 中 最 重要 的 一 个 环节 。 如 条 引导 失败 了 ， 你 的 应 用 也 就 失 
vag 


。 引导 应 该 允许 用 户 跳 过 。 
你 有 没有 用 过 每 次 打开 都 强迫 你 看 完整 个 引导 的 应 用 ? 如果 有 ， 
那么 这 个 应 用 你 可 能 用 不 长 。 

。 引导 中 传达 的 所 有 信息 应 该 都 可 以 随时 访问 。 
同样 ， 引 寻 中 提供 的 任何 帮助 信息 都 应 该 作为 参考 ， 令 用 户 随 
手 可 得 。 比 如 说 ，Fidelity 让 你 可 以 在 “设置 ”里 重新 启动 引 
ie. BBE 10 革 查 看 更 多 示例 。 


[小 贴 士 ] 
对 自己 的 应 用 了 如 指 掌 ， 
有 时 反倒 不 知道 如 何 指导 
新 手 用 户 。 做 个 不 带 倾向 
性 的 用 户 测试 ， 问 题 就 能 
迎刃而解 。 
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图 7-29 
iOS }k Fidelity: 你 可 以 点 击 “"Bring 
Back Instructional Guides”, © #7 


打开 引导 


[小 贴 士 ] 

把 提示 放 在 操作 按钮 或 菜 
单项 旁边 ， 内 容 要 简短 ， 
并 在 互动 开始 时 (例如 点 
ERR) 隐藏 提示 。 


E: T-Mobile 3 10:21 PM @oooo [-Mobile 去 10:22 PM 
Close Settings Tap to edit your cards 
Quotes & News Updates 
X Off 


Auto-Update 


Quote and News Data will update only when 
refreshed manually. 


Swipe to 
view more 
cards 


Log In Settings 
30-Day Access 


Access Watch List and Real-Time Quotes for 30 
days after your last logged in session. 


Watch List & Positions 


Show What's New 


Bring Back Instructional Guides 


视 况 吸引 模式 

不 管 你 的 应 用 是 否 一 定 要 有 着 陆 引导 ， 你 都 有 可 能 想 在 应 用 中 吸 
引用 户 使 用 某 个 功能 。 视 觉 吸引 还 有 助 于 在 某 个 特定 的 流程 中 向 
用 户 推介 新 的 功能 ， 而 不 是 在 启动 时 仅仅 显示 一 个 带 有 新 功能 列 
表 的 对 话 杠 。 


提示 

提示 应 该 指 癌 屏幕 上 茶 一 个 特定 的 工具 或 操作 按钮 。 要 避免 使 用 
幻灯 片 提示 (Zappos) 或 对 话 框 (HoursTracker), myAppFree 那 
样 一 屏 多 个 提示 的 情况 也 应 该 避免 。 至 于 提示 的 巧妙 设计 ， 可 以 
参看 Evernote Food 和 Mint 的 示例 。 


\ | / 
SAVE FILTER | CHANGE 


SEARCH VIEW 


Clock in, clock out, and add entries 
manually directly from the Jobs 
list by long-pressing any job in the 
list. 


Long-press on an icon to view the 
action's name. 


quick Tipi 


crap TO DISMISS) 


START SEARCH 
OVER AGAIN 
| 


news EJ 


ippFree 


. Jp of today is 


20:17:43 


R 
(xi 
Click here to download the 
La b app of the day and don't Free 
ES. forget to leave a review! kk kk 


Download share you save $ 0.99 € 
LAGI: Remember to share the app S3 

of the day to increase our 

community and let us get 

Apps with higher quality. 


=> 


*k-to-School Sti Settings 
Tap to clip recipes and save them to ACCOUNTS 
your Evernote account. 
Cash 
-— - e a Mie SP Hg Credit Debt 
Back-to-School 


tugs Strawberry Quesadillas 


| — Find La Fuji Mama on: 


ALERTS 


ADVICE 


| 600060 
See A] TODAY 
featured on auper 

connie CASH FLOW 


M 


No Service = > 


$0 Earned 
CB -$672 Spent 


High Spending 


SPENDING Nr 


10:49 PM 


Overview 


$38,893 
-$10,921 


BUDGETS December 


-$672 


O 
O 


You recently donated to a charity. Tur... 


Tap to add a transaction. 
@ Home 
Refreshing.. [^ 


7% =D 


要 想 了 解 如 何 设计 高 效 的 提示 ， 请 参阅 本 草 “ 番 外 篇 ”中 关于 


Intuit 的 案例 研究 。 


图 7-30 

iOS 版 Zappos、 安 卓 版 Hours- 
Tracker 和 Windows Phone 版 
myAppFree: 差劲 的 提示 设计 


图 7-31 
安 卓 版 Evernote Food f! iOS 版 
Mint: 优秀 的 提示 设计 
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iOS 版 RetailMeNot, 


图 7-32 
安 里 版 


Expense MORET 和 iOS 版 
Pandora: 持续 的 视 


4c m JR Pinterest: 持续 


引 


党 吸引 


er 
的 视觉 


持续 的 视 苋 吸引 
竺 续 的 视觉 吸引 模式 在 某 些 例子 中 看 上 去 也 许 和 提示 差不多 ， 但 


它们 在 持续 性 上 还 是 不 尽 相 同 。 这 些 视 宽 吸引 要 么 始终 可 见 ， 要 
么 保持 可 见 状态 直到 用 户 执 行 指定 操作 为 止 。 


在 RetailMeNot, Expense Manager 和 Pnadora 的 例子 中 ， 视 觉 吸 引 
一 直 持 续 到 用 户 执 行 指定 操作 (分 别 是 保存 优惠 券 、 记 录 花 销 和 
添加 喜欢 的 艺术 家 )。 点 击 操作 后 ， 视 觉 吸 引 就 永 信 消失 了 。 


á M LL T-Mobile + 3:48 PM 
% OVERVIEW 2 ag PANDORA 
lA 
Hello! ] x 


Tap to record an expense. 


eeeeo T-Mobile 4G — 5:02 PM Ti" 


e * 


Afterwards, you will see a monthly overview m - E 
\ 
In-Store Offers Online Offers AS ‘+ Add your favorite artist or 
J genre to get started. 


We created Pandora to put the Music 
Genome Project directly in your hands. 


It's an all new type of radio that only 
plays the music you like. 


$1 Off EVOL Quesadillas 


50% off portrait purchase and 
discounted portrait greeting cards 


但 是 Pinterest 的 视觉 吸引 是 一 直 可 扩展 的 。 不 管 你 添加 了 多 少 画 
总 有 一 个 视觉 吸引 ， 让 你 可 以 再 添加 一 个 画板 。 你 要 决定 把 

觉 吸引 放 在 哪个 位 置 : 在 Do It (Tomorrow) 应 用 中 ， 视 觉 吸 引 
STR ice 在 Flipboard 中 ， 视 觉 吸引 则 位 于 最 后 。 


Create a board... 


[pe dE Meo deb 


Create a secret 
boa 


图 7-34 

Z m Do It ( Tomorrow ) f1 iOS 
版 Flipboard: 视觉 吸引 可 以 放 在 
Pade er Jodi Cancel Flip this into... 列表 开始 处 或 末尾 处 


| Send to peer review 7 


TODAY 


| December 22 edit 
| ~~ 


Magazine 1 


Post videos -之 


Sort aff Images 


CREATE 
MAGAZINE 


Add a caption 


Argus A~ EAER, nupta H P fioc i BBR DEC H PRE 
示 持 续 的 视觉 吸引 。 比 如 , “点击 设置 体重 ”(Tap To Set Weight) 
的 六 角形 视 完 吸引 按钮 会 一 直 显 示 在 屏幕 上 ， 在 我 记录 了 今天 的 
体重 之 后 ， 就 会 有 一 个 显示 出 我 的 体重 的 六 角形 取而代之 。 每 周 
我 都 会 看 到 同样 的 视 完 吸 51。 


[小 贴 士 ] 

想 一 想 如 何 设置 视 沈 吸引 
的 恰当 时 长 。 是 应 该 始终 
可 见 ， 还 是 在 操作 后 隐藏 ， 
又 或 是 在 特定 的 情景 下 显 


eeooo T-Mobile 会 8:01 PM 1% E> NoService * 4:50 PM C73 示 ? 做 个 用 户 pu iX, ; Af 保 
三 ( @ ) + = ( O e =- t 
: - ~ 视觉 吸引 对 他 们 确 有 帮助 ， 
A Ci - 、 
TIME TO COFFEE TIME? |: ADD FOOD 而 不 是 在 打扰 他 们 。 
REHYDRATE? LOGIT! PHOTO? 

党 £m 
TAP TO SET (+) 
WEIGHT s 


1CUP 
COFFEE 


FRIDAY 


00725 | edi E 


TAP TO SET AGLASSES 
WEIGHT WATER 


o SUNDAY 
C FER DEC 22 
SATURDAY o 
DEC ?1 oS 60 F 图 7-35 
m iOS 版 Argus: 设置 体重 的 视觉 
吸引 根据 用 户 设 定 的 目标 重复 出 现 
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RT ALA S| 

"TA SLAY A ae 5 UPA A A THAI E s 
提 下 ， 能 鼓励 用 户 进行 特定 交互 操作 的 一 种 行 之 有 效 的 方法 。 
种 视觉 吸引 故意 设计 成 在 用 户 执行 了 常见 手势 操作 (如 点 击 、 T 
PBUH) 之 后 才 显 示 出 来 。 


Polar 与 许多 数据 流 应 用 类 似 ， 下 拉 内 容 列 表 时 会 看 到 “ 松 开 即 可 
刷新 ”的 文字 视觉 吸引 。 点 击 SigFig 图 表 ( 想 查 看 大 图 时 的 一 个 
自然 手势 )， 会 提示 用 户 旋转 设备 至 横 屏 。 


图 7-36 
iOS 版 Polar 和 SigFig: 可 发 现 
的 视觉 吸引 


Searching... ^ 


$6,884 $0 (0.0%) 


DOW 0.3% S&P 0.5% NAS 1.1% 


a Account Value 


Release to refresh... 


GAMINGBLEND ASKS 
Which console offers the best P 


value for its price? ^ } 

Rotate your device to see the chart 
in full screen. 

Xbox One PlayStation 4 


Fidelity charged you $50 in termination 
fees 


You Can Save: $50 


"" 


w 6 © zm 


番外 篇 : 视觉 吸引 一 一 铺 上 欢迎 秘 


作者 : Alissa Briggs, Intuit 公司 用 户 体验 经 理 兼 主任 设计 师 


想象 一 下 ， 一 位 新 结识 的 朋友 注 请 你 去 参加 一 场 晚 袜 。 你 提 着 红 
泗 到 了 晚宴 门口 ， 但 在 进门 之 前 你 犹豫 不 决 。 里 面 有 你 认识 的 人 
吗 ? 要 是 你 出 了 个 粮 ， 让 自己 丢 了 面子 怎么 办 呢 ? 


就 在 这 时 ， 宴 会 的 主人 为 你 打开 门 ， 给 你 一 个 大 大 的 拥抱 ， 欢 迎 
你 赶快 加 入 进去 。 他 帮 你 拿 着 外 衣 ， 将 你 介绍 给 其 他 宾客 。 你 的 
述 疑 一 扫 而 光 ， 你 微笑 着 ， 充 满目 信 ， 人 准备 好 享受 这 个 夜晚 。 
设计 一 个 令 新 手 满 意 的 体验 与 做 一 个 很 棒 的 主人 没有 什么 差别 。 
目标 都 是 一 样 的 : 帮助 你 的 客人 快速 克服 焦虑 ， 让 他 们 感受 到 热 
情 并 充满 自信 。 

刚 开 始 设 计 一 款 智 能 手机 新 资 计算 颖 Intuit Snap Payroll 的 时 候 ， 我 
们 首要 的 任务 就 是 打造 一 个 友好 的 新 手 体验 。 我 们 的 客户 是 一 些 刚 
刚 接 触 工资 报表 的 小 企业 主 。 在 精确 计算 新 资 问 题 上 ， 他 们 有 太 多 
的 顾虑 和 担忧 。 为 了 表明 这 和 蒜 计 算 磺 定 能 让 他 们 和 擎 担 这 项 高 难度 的 
工作 ， 我 们 必须 要 设计 出 热情 友好 且 能 激发 目 信 的 新 手 体 验 。 


下 面 来 看 看 ， 我 们 是 如 何 找到 解决 方案 的 ， 以 及 我 们 在 此 过 程 中 
学 到 了 哪些 东西 。 
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图 7-37 


没有 表示 欢迎 : 让 用 户 直 接 进 入 


主页 面 


IK RU s 
为 了 了 解 哪 一 种 设计 方案 对 激发 信心 最 有 效 ， 我 们 收集 了 用 户 对 
各 种 设计 理 您 有 的 反馈 。 下 面 的 图 片 是 我 们 测试 时 用 到 的 真实 框图 。 
设想 1: 直接 沉浸 
我 们 的 第 一 个 设想 就 是 把 “欢迎 稚 ” 统 统 丢 掉 ， 让 用 户 直 接 进入 
到 他 们 今后 会 不 断 用 到 的 应 用 功能 菜单 。 


My Business 


Take a quick tour 


客户 对 此 感到 茫然 无 措 。 他 们 不 确定 应 该 先 选 择 哪 一 项 ， 并 对 独 
芯 完 成 工资 计算 感到 更 加 焦虑 。 让 我 们 继续 晚宴 的 比喻 ， 这 种 情 
况 束 像 是 我 们 的 客人 神奇 地 出 现在 聚会 会 场 中 央 ， ARAA, E 
人 也 不 知 所 踪 。 我 们 还 需要 提供 一 个 迎接 他 们 到 来 的 场景 。 
设想 2: 使 用 向 导 

为 了 增加 一 个 场景 ， 我 们 使 用 了 一 种 笛 见 的 视觉 吸引 模 云 一 使 用 
可 导 。 我 们 测试 了 下 面 展示 的 4 个 版 本 ， 想 看 看 究竟 哪 种 模式 最 
ARL 


SmartPayroll 
The easy & FREE way to calculate 
iccurate paychecks 


Get Started 


SmartPayroll 


The easy & FREE way to calculate 
paychecks & payroll taxes 


Get Started 


SmartPayroll 


The easy & FREE way to calculate 
paychecks & payroll taxes 


Get Started 


7-38 

优点 陈述 : 一 张 图 片 ， 简 短 的 优 
点 陈述 和 鲜明 的 行为 召唤 操作 
按钮 


7-39 
功能 列表 : WA PRRI H AE A 
心 功能 措 述 


图 7-40 
步骤 列表 : 一 步 一 步 地 说 明 如 何 
使 用 应 用 
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“atl Carrier = 10:40AM ==> .alCarier = 10:40AM i | = :40 A [==> .alCarier = 10:40AM = 


How SmartPayroll Works How SmartPayroll Works 


Get Started Get Started Get Started Get Started 


图 7-41 多 步骤 使 用 向 导 : 一 组 介绍 页 ， 用户 可 滑动 页 面 了 解 更 多 的 应 用 信息 


用 户 对 这 些 方案 反响 一 致 : 没有 人 阅读 页 面 文字 或 是 滑动 查看 功 
能 列表 。 反 之 ， 他 们 快速 跳 过 这 些 引 导 ， 直 接点 击 “ 开 始 "。 用 户 
解释 说 这 些 页 面 挺 碍 事 的 ， 他 们 更 愿意 立刻 直接 体验 应 用 本 身 。 
提供 前 置 引导 传达 信息 的 办 法 并 没 能 帮助 用 户 树 立信 心 。 这 就 像 
KERZ NH IB. AREI- KER, LMS Ale 
An fal WET FP TT TEA. RE ET SA SI, ABE 
人 碍 手 碍 脚 。 

设想 3: BORAT A 

为 了 提供 不 打 断 用 户 操作 流程 的 引导 ， 我 们 尝试 了 另 一 种 常见 的 
模式 一 幻灯 片 。 运 用 这 种 模式 ， 用 户 可 以 看 到 真实 的 应 用 界面 ， 
但 界面 上 覆盖 了 一 层 文字 说 明 。 

我 们 尝试 了 几 种 泽 层 方案 ， 其 中 的 两 种 如 下 所 示 。 


Add workers 
and calculate 
checks 


G 


m N 


View «pay —— Records get saved 
oet save 
employer « here for future. 


employee reference 
taxes 


You can view & pay S - Records get saved 
federal and state here forfuture 

Pay Workers taxes here. We'll reference 
help you! 


This is where you | » i 1 
add workers & m 
calculate checks. * 

Pay Taxes ~ 


QUICH TUTORIAL QUICH TUTORIAL QUICH TUTORIAL 


(lof 3) Tap to continve (à of 3) Tap to continve (3 of 3) Tap to continue 


虽然 用 户 喜 欢 在 背景 上 看 到 应 用 ， 但 是 对 页 面 上 那么 多 说 明 感 到 
恼火 。 有 些 人 评论 说 “我 没有 时 间 去 费劲 弄 懂 它 ， 我 就 定 想 让 
这 些 东 西 别 描 着 我 ， 当 然 还 有 “我 非得 看 完 这 些 东 西 吗 。 

我 们 离 好 的 设计 越 来 越 近 了 ， 但 问题 是 一 次 性 显示 太 多 说 明 会 让 
A PEAT ARPES Y. RHR BAT AY E EA te AE 
来 了 了， 又 同 他 引 存 了 10 位 他 非 见 不 可 的 客人 ， 然 后 任 由 他 们 目 己 
曼 头 转 癌 地 站 在 大 厅 里 。 我 们 怎样 才能 让 体验 更 简单 呢 ? 


图 7-42 
多 步骤 幻灯 片 : 在 主导 航 页 面 上 
突出 多 个 功能 点 


图 7-43 
多 步骤 幻灯 片 : 用 户 需要 点 击 一 
系列 步 又， 每 个 步骤 描述 一 个 寻 
航 元 素 
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设想 4: 单 步骤 幻灯 片 
我 们 采用 了 幻灯 片 设想 ,但 只 关注 用 户 首次 进入 应 用 时 应 该 做 的 
唯一 一 件 事 。 


图 7-44 
单 步骤 幻灯 片 : 只 说 明 最 重要 的 
一 件 事 情 My Business 


.all Carrier = 10:40 AM —13 


Pay Workers 


To calculate a check, let’s 
first add a worker. Tap here 
to begin! 


Or, 


客户 对 这 种 设计 喜 受 有 加 。 他 们 希望 能 察觉 到 应 用 的 全 部 功能 列 
表 ， 但 也 希望 得 到 从 哪里 下 手 的 明确 建议 。 


但 这 个 模式 还 是 让 用 户 有 点 紧张 。 客 户 问 道 :“ 既 然 你 们 有 一 个 引 
性 ， 这 是 不 是 就 意味 着 这 个 应 用 对 我 来 说 太 复 淋 ， 我 不 可 能 目 己 
搞 明 白 ?” 我 们 也 观察 到 ， 用 户 试图 点 击 灰色 背景 关闭 浮 层 ， 想 
看 清楚 浮 层 下 面 是 什么 。 我 们 看 到 了 进一步 简化 设计 、 避 免 干扰 
用 户 的 机 会 。 

设想 5: 提示 

在 这 个 设想 中 ， 我 们 保留 了 单 步 又 幻灯 片 的 有 效 部 分 (一 个 清晰 
的 行为 名 唤 按 钮 和 一 个 可 见 菜 单 )， 同 时 修正 了 一 些 问题 (引导 链 
接 和 灰色 浮 层 )。 用 户 在 这 个 设计 里 看 到 的 是 一 个 提示 样式 的 行为 
TIR ERE. HEAR d BERETE— br BLESORCE 


图 7-45 
提示 : 一 个 行为 召唤 和 操作， 屏幕 
其 他 部 分 均 可 点 


Carrier — 10:40AM = 


My Business 


Pay Workers 


这 种 模式 的 测试 结 末 非常 理想 。 客 户 不 仅 明确 地 知道 第 一 步 怎么 
做 ， 也 知道 自己 处 于 哪个 位 置 ， 以 及 哪些 功能 对 他 们 可 用 。 我 们 


终于 可 以 让 我 们 的 晚 宴 宾客 们 感受 到 热情 和 目 信 ， 与 此 同时 告诉 
他 们 :“ 沫 谱 上 有 一 道 业 你 一 定 要 知道 1 ” 


在 为 用 户 打造 一 个 完美 的 新 手 体验 的 过 程 中 ， 我 们 学 会 了 把 以 下 


两 个 原则 牢记 在 心 ; 
。 让 开道 


不 要 让 用 户 界 面 上 有 含混 不 请 的 元 素 ， 不 要 强迫 用 户 耐 着 性 子 
看 完 使 用 同 寻 ， 否 则 会 让 他 们 感觉 你 在 隐瞒 什么 。 

| 
提出 从 何 起 步 的 建议 ， 理 清流 程 ， 消 除 不 确定 因素 。 


这 些 研究 结果 指导 我 们 设计 出 了 Intuit Snap Payroll 新 手 体 验 的 最 
终 版 本 。 正 如 设想 5 中 所 说 ,我 们 提供 了 一 个 提示 ， 指 向 用 户 应 
该 执行 的 第 一 步 操作 。 

当 用 户 第 一 次 打开 应 用 时 ， 会 看 到 主页 上 放 着 一 个 友好 的 便利 贴 ， 
指 加 推 存 的 米 单 项 。 但 他 也 可 以 看 到 其 他 的 业 单 项 ， 也 可 以 选择 
Fi ch Bes et [SUUS 
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图 7-46 
iOS 7 之 前 的 设计 版 本 : 可 隐藏 
的 便利 贴 


图 7-47 
iOS 7 的 设计 实现 : 有 用 但 不 碍 事 


ATETA 10:01 AM 


Feedback Snap Payroll 


Employees Lets add 


Check History | 
| 


这 一 设计 非常 成 功 地 将 客户 的 念 惧 转化 为 上 自信。 用 户 很 快 就 理解 
了 应 用 提供 的 各 项 功能 ， 同 时 也 感到 目 己 知音 接 下 来 为 获得 积极 
的 体验 应 该 如 何 去 做 。 


我 们 根据 iOS 7 设计 指责 ， 使 用 了 一 点 幻灯 片 效 末 和 动画 效 坟 ， 实 
现 了 开放 性 和 引导 性 之 间 的 平衡 。 在 这 个 示例 中 ， 末 单 首 先 加 载 
进来 ， 然 后 便利 贴 渐 出 ， 传 达 了 有 用 的 信息 ， 也 设 有 妨碍 用 户 。 


Employees 


ra zt 


IUS =A 


在 吸引 客户 进入 你 的 应 用 时 ， 不 要 仅仅 指 着 大 门 ， 和 希望 他 们 自己 
走 进来 。 要 人 花 时 间 精 雕 细 琢 ， 设 计 出 一 个 体贴 周到 的 体验 ， 让 用 
户 感 到 友好 、 上 自信 。 这 样 他 们 会 期 待 下 一 次 的 造访 。 


zB 8 ss 


社交 模式 


。 社交 模式 
社交 注册 (Social Registration), 31424 (Connecting)、 关 注 (Following), 
个 人 资料 (Profiles)、 群 组 (Groups)、 游 戏 化 (Gamification) 
提供 社交 连接 的 服务 仍 在 与 日 俱 增 ， 并 且 进 一 步 细 分 。 现 在 我 们 可 以 通 
过 分 至 美食 、 购 物 、 健 身 以 及 许 许 多 多 的 事物 ， 与 有 共同 喜好 的 人 相互 
连接 。 在 这 一 章 里 ， 我 们 会 详细 分 析 一 些 社交 模式 ， 这 些 社 交 模 式 可 以 
帮助 你 的 用 户 通过 移动 设备 建立 这 样 的 连接 。 


社交 注册 


在 第 2 半 中 ， 我 们 讨论 了 注册 表单 模式 。 在 此 ， 我 们 将 具体 地 讨论 社交 
应 用 中 的 用 户 注 册 流 程 。 
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iOS 版 MapMyFitness 通过 提供 
Facebook 登录 和 选 填 个 人 信息 简 


MapMyFitness 与 We Heart It 


MapMyFitness 提供 了 Facebook 登录 ， 用 Facebook 的 API 接口 
显示 一 个 单独 的 授权 页 面 。 如 果 用 户 授 权 ， 它 就 会 从 Facebook 
的 个 人 资料 中 把 相关 的 注册 信息 调 取 出 来 ， 用 以 创建 你 的 
MapMyFitness 个 人 资料 。 


11:31 AM 11:34 AM 


SIGN UP 


Facebook 


[2 


MapMyFitness will receive the 
following info: your public profile, friend 
list, email address and birthday. 


Join The Movemenfi 


Ready to be a fitness rockstar? Sign up today 
to start tra ites, distance, speed, 


Join Now 


10:59 AM earching... = 10:54 AM 


PERSONATIZE 


= mapmy@fitness 


COACHING MUSIC UVE TRACKING 


Tap here to open the O FF fa 
navigation menu. None selec ted) None selected [7 


Activity Run 


Select a Route 


Tap to add your 
profile image 


Skip Tutorial X 


FIND NEW ROUTES 1 


WESTIN WITHOUT LOSING YOUR WAY 


X PAY 2, We Heart It 像 其 他 许多 应 用 一 样 ， 设 有 正确 使 用 
Facebook API 接口 实现 快捷 登录 。 在 我 用 Facebook 账号 授权 注册 
之 后 ，We Heart It 要 求 我 登录 Facebook (实际 上 我 已 经 登录 了 )， 
并 且 直 到 那 时 才 告 诉 我 ， 如 果 我 想 用 Facebook 注册 ， 就 必须 修改 
我 的 Safari 浏 贤 奋 设置 。 到 底 是 怎么 回 事 ?最 严重 的 是 还 有 一 个 
bug: “不 发 布 信息 到 Facebook ”选项 连续 出 现 了 好 几 次 。 束 是 这 
些 混 乱 的 多 余 步 又 和 唇 绊 让 用 户 感到 挫败 ， 并 最 终 放弃 使 用 。 


“We Heart It” Would Like to 
Send You Push Notifications 


Notifications may include alerts, 
sounds and icon badges. These can 
be configured in Settings. 


Don't Allow OK 


11:13 AM 


Facebook 


we Bay 
vit Was 


We Heart It would like to post to 
Facebook for you. 


No Service + 11:13 AM t710} 


we®it 


Sign in or start your account with: 


@ oruseapassword 


facebook 
Noumatoginfst | 


四 Get Facebook for iPhone and 
browse faster. 


Email or Phone 


Forgot password? - Help Center 


English (US) - Español - Portugués (Brasil) - More 
Facebook 62013 


Facebook 


we Ba 
vit 


We Heart It will receive the following 
info: your public profile, friend list, email 
address, current city, website and 
personal description. 


€ 


Cancel 


No Service 全 


o facebook 


To use Facebook, please select your 
Settings app > Safari > Accept Cookies > 
From visited. 


n Get Facebook for iPhone and 
browse faster. 


theresaneil@gmail.com 


Password 


连接 


利用 其 他 社交 平台 的 API 的 一 大 好 处 是 ， 
的 社交 连接 。Oggl 提供 了 一 种 简单 的 连接 流程 作为 注册 过 程 的 一 个 
在 这 个 例子 中 ， 我 用 我 的 Twitter 账号 注册 Oggl， 然 后 
Ogel 为 我 生成 了 一 个 预先 填写 了 的 个 人 资料 页 ， 我 只 需 填 写 密码 
和 邮箱 地 址 即 可 。 几 次 点 击 之 后 ， 我 就 能 和 我 在 Instagram, Twitter 


可 选 部 分 。 


和 Facebook 上 关注 的 所 有 人 连接 起 来 。 


nb 


E, HE 


让 用 户 访问 他 们 已 有 


图 8-2 

iOS 版 We Heart It: 我 不 喜欢 
(heart) 所 有 这 些 授权 页 面 和 
错误 


[小 贴 士 ] 

正确 使 用 社交 网 络 的 API 
接口 以 简化 注册 体验 。 一 
定 要 对 注册 流程 的 各 个 路 
径 都 进行 质量 保证 测试 。 
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图 8-3 
iOS 版 Oggl: 加 入 其 他 社交 网 络 
的 连接 作为 注册 流程 的 可 选项 


e | © theresaneil 
y 
NN a password 


*óggl" Would Like Access to 
Twitter Accounts 


Don't Allow OK 


© Connect with Instagram 


Y Connect with Twitter 


f Connect with Facebook 
&3 Use Email 


Find Friends Skip Find Friends Skip 


Theresa Neil 
theresaneil@gmail.com 


€ Connect to Instagram 


Find Friends Skip Find Friends Skip Find Friends Skip 


Tom Gibson 
ftoongee 
Michael Cote' 
f drunkandretired 
SY 

Connected to Instagram Jessica Douglas 
fjessica.douglas.963 
Scott Boms 
fscottboms 


Connect to Facebook 
c C Co... 
fdaytripperwhit 


LinkedIn 在 网 页 版 和 移动 应 用 上 发 布 了 一 个 新 的 流程 ， 这 个 流程 对 
推动 用 户 彼此 建立 连接 产生 了 极 大 的 影响 。 任 何 时 候 你 接受 了 一 
个 邀请 ， 都 有 一 个 全 屏 页 面 提示 “查看 在 LinkedIn 上 你 可 能 认识 
HJ A", 


1:05 PM 


1:05 PM 


Add Connections 


Add Connections 


Contacts on Linkedin 


Send a connection request to people you already 
know on Linkedin 


v 
XV 
D 


See who you already know 
on Linkedin 


加 | Looking for contacts 
l - 


Timothy Sheeh... 

SVP, Products, +2 
Marketing, & Strategy 

at Fiserv 


Sean McCullo... 


+2 
; Software Engineer 
, 
Tim McCracken 
Sr. Manager, Program +2 


Management at 
PayPal 


Bradford Ober... 
+2 
CEO at Bare Snacks 


AP Peter Hsing 


让 我 们 再 来 看 看 MapMyFitness, én fal AIIE ETT T 
高 分 ， 但 是 它 的 连接 功能 没有 放 在 注册 流程 当中 。 不 过 这 倒 不 是 
什么 问题 ， 因 为 它 在 用 户 正 常 的 操作 流程 中 有 计划 地 插入 了 连接 
提示 : 从 主 某 单 到 健身 前 后 的 视觉 吸引 ， 再 到 近期 活动 (Activity 
Feed) 中 的 视觉 吸引 ， 贯 穿 始终 。 


AT&T = 2:34 PM >$ ee AT&T = 2:34 PM 


eoo AT&T = 2:36 PM 


Friends < Friends Find Friends 


< Back Facebook 


rch t Add à 
14 friends use MapMyFitness | IAN 
E Facebook R 
Find friends on Facebook E Abby Scholz Add 
vs 
? 2^1 yy Twitter , 
4 Find friends on Twitter M Bobbi Krieg Sudholt Add 
B 
十 
4 
r A Contacts T 
1 Find friends in your contacts | » "e i Chery! Ouellette Costantini Add 
Chris Jensen Add 
Tap the +Add in the top right corner 
DX dalton HOGGGG 
d NN Add 
\ | 
Hillary jenson Add 
Jereme Altendorf Add 


图 8-4 
iOS 版 LinkedIn: 接受 一 个 邀请 
后 获得 与 更 多 人 连接 的 建议 


[小 贴 士 ] 

在 应 用 中 始终 提供 连接 点 。 
注册 时 在 一 个 或 多 个 其 他 
用 户 操 作 流 程 中 提供 连接 
的 机 会 是 种 不 错 的 方法 。 


图 8-5 
iOS 版 MapMyFitness: 从 主 菜 单 
中 查找 并 添加 好 友 


图 8-6 
iOS 版 MapMyFitness: 健身 前 后 
及 近期 活动 中 都 有 提示 连接 的 视 
觉 吸 引 


e0000 AT&T F >? 2:58 PM 


= Activity Feed 


下 


FIND FRIENDS + 


No Activity? 
Find Your Friends 


Fitness is more fun with friends. Share Fitness is more fun with friends. Share 
your milestones, follow your buddies your milestones, follow your buddies 
and get the social motivation you need and get the social motivation you need 
to succeed. 


+ Add Friends 


um" 


关注 

前 面 所 有 的 例子 讲 的 都 是 如 何 建立 批量 连接 。 但 你 可 能 还 想 为 用 户 
提供 一 种 一 对 一 的 连接 选择 。 多 亏 了 Twitter, “YE” (Following) 
一 词 已 经 成 了 这 种 方式 的 通用 术语 。 在 Twitter 和 Zoomingo 应 用 
中 ,“ 关 广 ” 流 程 是 这 样 实现 的 : 我 正在 训 览 ， 看 到 某 个 有 趣 的 东 
西 (比如 一 条 推 文 或 是 一 张 优惠 券 )， 然 后 看 看 这 条 信息 是 谁 分 享 
的 ， 再 查看 一 下 他 还 分 享 过 什么 。 如 果 那 些 内 容 吸 引 | 我 ， 我 就 会 
XE A. 


1:54 PM 


Profile 


Hiten Shah 5 5d 
How much did 3 @Butter give away for 
their $400k funding? kiss.ly/1ccSgTt 
answer by Gjoelgascoigne 


videos this winter! 


you think? kiss.ly/1ig6dCv 


#nothingtohide 3 
Hiten Sha 
@hnshah 
KNOW AustnBusinessJournal OMyABJ 5d 
YOUR , Austin home sales rise again in 33.4K 104.9K 132.8K 
November - bizj.us/tymkl TWEETS FOLLOWING FOLLOWERS 
xx *$. Follow 
2 Ho ws 
GoPro « 12/17/13 Hiten Shah © - 
Stoked ta snow — Follow us Putting the im " Faces to € 
for the raddest GoPro photos and kiss.ly/J8iIOZX 


Hiten Shah @hnsha 42m 
Is every marketing tactic now 
f considered a growth hack? What do 


1:54 PM 


Profile 


Hiten Shah 
@hnshah 


33.4K 104.9K 132.8K 
TWEE FOLLOWING FOLLOWERS 


1x & Following 


Hiten Shah @hnshah 
Putting the Power of Faces to Work 


kiss.ly/J8iOZX 


Hiten Shah Shnshal 42n 
Is every marketing tactic now 
, considered a growth hack? What do 


you think? kiss.ly/1ig6dCv 


2:05 PM >$ No Servi 7 2:03 PM 


< Back Item Details € Item Details Zoomingo 


A Lisa M. Follow 
187670 ZPoint 
569 followers 

E Following 35 Stores 

Following 4 Categories 

203 Shopping List Items 


Add to Shopping List 


203 Watch List Items 


Z 
o 
dro: 
Q 


a Posted by Lisa M. > 
a day ago 
Z| View Item Detail > 
5259 Deals Posted 
Qi Find Similar Items > 


€ Zoomingo Zoomingo 


Posted Items: 5259 


ad 20 ad 13 O 


Tees The Day Up T... |30% Off All Gift Sets 


LOFT Bath and Body Works 


Q mon 一 
? 40% OFF ， 


M OFF 贿 EVERYTHING 


TA À : 


Pose 把 “关注 
流程 中 ， 首 页 


” 变 成 了 一 个 促使 用 户 注 册 的 功能 。 在 它 的 “关注 ” 
显示 一 位 推荐 用 户 (Featured Poser) 以 及 一 个 行为 


召唤 的 关注 按钮 。 如 末 我 想 看 这 位 推荐 用 户 的 收藏 集 和 个 人 资料 ， 


就 需要 注册 (如 琳 我 还 没有 注册 的 话 )。 


图 8-7 

iOS 版 Twitter:“ 关 注 ” 流 程 可 
以 让 你 看 到 某 一 用 户 分 享 的 更 多 
内 容 


图 8-8 
iOS 版 Zoomingo:“ 关 注 ” 流 程 
突出 展示 了 一 个 用 户 在 该 网 络 内 
的 影响 


[小 贴 士 ] 

在 浏览 流程 的 关键 点 上 提 
供 “ 关 注 ” 功 能 以 增加 用 
户 的 互动 。 要 让 个 人 资料 
页 面 上 的 “关注 ”按钮 起 
到 明显 的 行为 召唤 作用 。 


图 8-9 
iOS 版 Pose: 推荐 用 户 使 “关注 ” 


成 为 一 种 用 户 转化 策略 


图 8-10 
iOS 版 Foodspotting 和 Foursquare: 
用 统计 数据 来 表示 互动 和 成 就 


149 PM T M No Service ^ 1:49 PM 7% ND: 


EN c 


ique A 
( 
A | 
Shop It 
erit Ba 


Featured Poser 


Fashion-obsessed world traveler & trendsetter 


@phoandchips / 
BPriadaiad 


ENCTINEN 


Forgot Your Password? 


Just In 


T A SURE 

虽然 不 古 只 有 社交 平台 上 才 有 个 人 资料 ， Ed 
A1 NR 质料 都 是 关键 元 素 之 一。 最 好 的 个 人 资料 页 会 用 照片 、 人 简介 

和 兴趣 列表 “介绍 ”一 个 人 。 个 人 资料 页 还 应 该 包括 近期 功 太 或 
其 他 说 明 访 用户 互动 水 平 的 指标 ， 以 及 他 的 各 项 成 就 ( 受 欢迎 程 

ie. 影响 力 或 在 该 网 络 中 的 活跃 度 ) ， 页 面 上 还 要 提供 关注 、 加 为 

好 友 或 是 其 他 与 那个 人 连接 的 功能 。 


一 些 应 用 使 用 统计 数据 显示 一 个 人 在 该 社区 的 互动 性 ， 比 如 
Foodspotting 和 Foursquare。 这 种 设计 合乎 情理 ， 因 为 这 两 个 应 用 
中 的 关系 都 是 建立 在 信用 和 信任 的 基础 上 。 


No Service > 2:25 PM 7% Gps No Service = 2:25 PM 
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《 Back Derek Simcik [*] Stats 
Points (last 7 days) High 
eu °° — )177 
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following followers j 
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Chicago Casa de 323 


Adam S. 
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Add Friend 
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3 Seafood expert 
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Home (private) 
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Home (private) 


Stewart House 
Home (private) 


Pose 和 Pinterest LATE HFA 47 3k BJ 288 EH, a E f I8] ed E, 
的 社交 网 络 。 那 么 用 户 个 人 资料 页 的 设计 以 分 享 照片 内 容 为 主 也 


BLAN AE AL. 
No Service © 1:50 PM & 1 $8984 No Service = 2:28 PM C7} a=: 图 8-11 
i iOS 版 Pose 和 Pinterest: 个 人 资 
< Collection Profile Mal € bribri1245 = iOS 版 Pose 和 Pinterest: A% 


料 页 上 突出 显示 了 所 分 享 的 内 容 


Brianna Britt 


f 
Follow 


528 32 47 31 
Pins Likes Followers Following 
Being Me Funny Stuff 


有 时候 ， 一 个 社交 网 络 涉及 个 人 生活 的 许多 方面 ， 以 至 于 一 页 个 
人 资料 根本 放 不 下 那么 多 内 容 。Instagram 和 Google+ 采用 选项 卡 
呈现 个 人 资料 的 不 同方 面 ， 而 LinkedIn 则 采用 逐 级 深入 的 列表 收 
如 更 多 个 人 信息 。 


[小 贴 士 ] 

个 人 资料 是 社交 网 络 的 核 
心 。 归 根 结 底 ， 其 设计 应 
该 涵盖 足够 的 信息 ， 让 大 
家 愿意 在 这 个 网 络 中 彼此 
连接 ， 建 立 关系 。 
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图 8-12 
Instagram 和 Google+: 选项 卡 式 
的 个 人 资料 页 


图 8-13 
iOS 版 LinkedIn: 更 多 个 人 资料 
详情 采用 列表 式 设计 


No Service ^ 2:35 PM 


BANHMON p^ 


487 363 83 


| t: f )Wwers llowing 
Following 


Jan Jursa 


Information Architect 
Lives in Berlin 


C9 Add to circles 


About Posts 


e Jan Jursa 


Photos YouTube 


Recent Activity 


[1 Ryan Meuse 
Ryan has a new cor 


Endorse Ryan for 
User Experience 


Ryan Meuse 
Vice President of Product 


at CAKE A Theresa Neil 
EGR 


Ryan Meuse 
Vice President of Product at CAKE 


© Recent Activity > 
Platform Migration. 
TD. inommon What it means for Per... 
可 AAA 
ft 5004 Connections > M Meuse x m 
Vice President of Product at CAKE 
g—Á MÀ 


3:07 PM 


Ryan Meuse 


Connections In Common 


B 


Stuart Brogan 
© 2 M Director, Product Management at 
‘ MarketShare 


Tanwir Danish 


Head Product Management, 
MarketShare 


D 
BE 
J 
H 
Jeanine Harriman 
Executive Director / Head of Client 
e Experience, Platforms, JP Morga... 
M 


William Merchan 
VP BD & GM Dynamic Pricing at 
MarketShare 


群 组 


一 些 社交 网 络 的 群 组 是 内 部 设置 好 的 ， 还 有 一 些 群 组 需要 由 用 户 
创建 。Group.me 的 创建 群 组 界面 就 极其 人 简洁。 首先 新 建 群 组 名 称 ， 


然后 利用 动态 搜索 来 添加 联系 人 。 


8-14 
iOS 版 Group.me: 利用 动态 搜索 
简化 群 组 创建 


| Name your new Group | e Add M b 
i y + embers 


You are the only person in this group. 


^ Share Group 


Tap above to create a share link for this group 


Suggestions 


s 


alw[eIn[rIvlul:[o[P 


p — — -— -—— — — — ——— — 


A|s|p|r|a|H][k]L 


ZXCVBNM 


Nee eee — MÀ — — ee M 


space 


e^ 5:35 PM 


| Cancel | Contacts 


cathlinestrategyplusdesign.com All messages loaded. 


Jessica Douglas Jennifer Graf 


Theresa Neil invited — Q 


A 


alexandre.junqueira@integritas.co... 
alexandre.junqueira@integritas.com.br 


algrabiel@gmail.com 
algrabiel@gmail.com 


All 


all@silvercar.com 


Allison.Martin@wispubs.com 
Allison.Martin@wispubs.com 

Amir 

amir@travelexperts.se 


Amy 
(415) 244-8836 


AMY 


amyinaustin@austin.rr.com 


Andrea 


acanalini@ebilling.it 


IN«XxZ«caomovozzocesx*c—-rommoou» 


=. 
SS 


het Aa ABS In il AA. (E Facebook 
个 示例 中 ， 我 收 到 的 邀请 显示 为 应 用 内 提醒 。 


图 8-15 
iOS 版 Facebook: 创建 群 组 并 添 
加 成 员 ， 被 添加 的 成 员 会 收 到 应 
用 内 提醒 


图 8-16 
iOS 版 LinkedIn: 一 个 更 正式 地 


加 入 群 组 的 程序 


T 


Tt 


236 | #8 


No Service 4 1 5:48 PM Veriz 10:48 PM 
Cancel Create Group Create Cancel Add Members INE. f] Theresa Neil added you to the 
closed group TNS«D Team. 
Lulu Tsui, Suze Kemper E a) 
Taylor Tay commented on your 
TNS+D Team : post: "Awwwww lol wait till | get 
ep Katie Journeay a there~~~! Xx" 
Description (optional) K B g 
5 Taylor Tay, Kenny Wujek and Ellie 
e ES Suze Kemper E Byun like your post on Taylor Tay's 
F e S timeline: "It's not east to play hid... 
ow Courtney Key H e 
1 Yodé Olubajo likes your comment: 
Privacy Closed Ei ; : " "http://www.npr.org/ 
Obaidullah Khawaja L 2013/10/12/229869334/..." 
M e 
Ea Ryan Kimbro N 
o Eileen Cambridge, David May and 
E =" Lynn Perkins also commented on 
QIWIEIRITIYIUI ! OIP a Viece Kuykendall a Bee vod Olubajo s link. 
| Ea . : a 
Cathy Kyle M 
AISIDIFIGIHIVJIKIL Ss y Ry u Joe Specht, Andrew Pasacrita and 
v i Peter Pugliese also commented on 
L v Michael Pasacrita's status. 
; xw N 
EM ZIXICIVIBINIMBS A Christina Landsborough : a 
了 : GERNE Ben Wah invited you to 
123 space return David Landsborough @ 
? Notifications 


LinkedIn 会 向 你 推荐 “你 可 能 喜欢 的 群 组 ”， 并 允许 你 通过 点 击 

“+” 号 按钮 加 入 该 组 。 许 多 和 群 组 需要 组 长 确认 才 可 以 加 入 。 在 此 

例 中 ， 我 添加 了 Boxes 和 Arrows Group 群 组 ， 然 后 得 到 反馈 说 我 

的 请 求 正在 处 理 中 。 我 在 我 的 个 人 资料 页 上 面 可 以 方便 地 访问 我 
已 经 加 入 的 13 个 群 组 。 


如 果 你 的 社交 网 络 确实 需 
计 得 极其 


要 用 户 创建 群 组 ， 那 么 你 应 当 把 流程 设 
向 单 ， 并 在 应 用 中 使 用 视觉 吸引 。 


No Service > 


No Service = 
< 


Groups You May Like 


Interaction Design Associ... 
IXDA , 3 60117 members P 


Pending Membership m UX Strategy and Planning + 
8557 members 
$ UX Directors & Execs (UX... 
a Pending enor & User Experience Group 
& 21048 members + 
Your Groups 
(The New) Mobile User Ex... a. UX Professionals + 
Fa: 10478 members > 39142 members 


gj Austin Mobile Innovators j. Upon Experience Prosesm... 十 
> 5216 members 
58 members 


Boxes and Arrows 


usin Austin UX > == 11087 members t 


3 606 members 


ww» Information Architecture I... 


nr > 4 @ 7043 members + 
ma Mobile User Experience P... " UILDG) Us Sr iur Des... 十 


Groups You May Like Theresa Neil e 


Principal at Theresa Neil 
Interface Designs 


@ Update Profile 


© Who's viewed your profile 


: Interaction Design Associ... 
IXDA 60117 members $ 


— UX Strategy and Planning 十 
8557 members 


& User Experience Group 十 
21048 members 


UX Professionals 十 
39142 members 


User Experience Professi... 


$^ 5016 members + (Qo Recent Activity > 
ws» Information Architecture I... + 
^ A 7043 members XX 617 Connections > 
UIDG - User Interface Des... 
NPS) à 13166 members t ES 13 Groups > 


Group join request sent. 


游戏 化 

如 今 ， 似 乎 人 人 都 想 把 自己 的 应 用 游戏 化 〈 非 游戏 类 应 用 中 包含 
类 游戏 元 素 )。 实 际 上 他 们 真正 想 要 的 是 一 个 有 黏 性 的 应 用 ， 即 
人 们 会 反复 使 用 的 应 用 。 但 真正 的 游戏 化 远 不 止 提供 几 个 徽章 那 
么 们 单 。 要 想 理解 游戏 化 背后 的 科学 和 心理 因素 ， 我 强烈 推荐 阅 
读 以 下 三 本 书 :《 行 为 变化 设计 》 (Designing for Behavior Change， 
Stephen Wendel 著 ， 由 O' Reilly F 2013 年 出 版 )、《 说 服 人 要 异 
OHY ` (How to Get People to Do Stuff, Susan Weinshenk E, H 
New Riders 于 2013 年 出 版 )， 以 及 《必然 心动 : 情感 化 交互 设计 
指南 》 (Seductive Interaction Design, Stephen Anderson 车， 由 New 
Riders 于 2011 年 出 版 )。 


TER: 要 是 游戏 化 实现 得 不 好 ， 可 能 会 产生 事与愿违 的 结果 。 
让 我 们 看 看 Audible 以 及 我 称 之 为 “ 勿 忘我 ”(Forget-Me-Not) 的 
有 反 模 式 示例 。 我 是 Audible 的 长 期 订阅 用 户 ， 购 买 过 几 本 部 有 声 书 
籍 。 我 在 车 里 听 Audible， 在 电脑 上 听 ， 在 健身 房 里 听 ， 在 各 种 不 
同 的 设备 上 听 。 虽 然 我 是 一 个 长 期 忠诚 的 用 户 ， 但 看 看 我 的 收获 
"E. 没 得 到 任何 徽章 不 说 ， 它 还 把 我 列 为 了 “新 人 ”等 级 ! 


注 1: 中 文 版 已 由 人 民 邮 电 出 版 社 出 版 。( 编 者 注 ) 


图 8-16〈 续 ) 


iOS 版 LinkedIn: 一 个 更 正式 地 


加 入 群 组 的 程序 


+H- 
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图 8-17 
Windows Phone /& Audible: © 
然 是 长 期 的 忠实 用 户 ， 却 依然 是 
新 人 等 级 


图 8-18 
iOS 版 Kobo: 路 平台 的 Reading 
Life 激励 机 制 


x 
badge collectiq listening level 


you've earned 1 out of 17 


app master 


(9) 2000 hours to go! 
app scholar 


Stenographer Audible Obsessed Weekend Warrior 1000 hours to go! 


| app pro 
© 500 hours to go! 


app novice 


100 hours to go! 


© achieved on 06/19/2013 


Undecider Flash Eighty High Noon 


Repeat Listener All Nighter Marathoner 


为 什么 会 这 样 ? 因为 它 只 计算 了 我 在 某 一 个 移动 设备 上 所 做 的 操 
作 。 要 想 实 现 游戏 化 ， 关 键 是 要 满足 用 户 跨 设备 互联 和 同步 的 期 
H, Kobo 的 Reading Life 系统 在 这 方面 做 得 不 错 ， 而 且 还 加 入 了 
“连接 ”设计 模式 。 


10:25 PM D o Service + 10:28 PM 


Awards ; Friends 


Connect to Facebook to share your Si 
: ign In 
activity with friends. f s 


Connect with your Eo 
friends on Facebook. 


Tip: Connect your Kobo account to 
Facebook to see your Facebook friends 
using Kobo. You'll be able to see 
what they're reading, and compare 
Reading Life stats and awards. 


it se VAR HEB (Nike Training Club) 收回 了 徽章 系统 ， 但 继续 提 
供 直 接 与 个 性 化 训练 目标 相关 的 激励 机 制 |。 


图 8-19 
| GWAR. 实现 个 


性 化 目标 ， 然 后 获得 奖 所 i 
TRAINING TOTAL NEXT REWARD 


GET LEAN » 240... 30D... 


HIGH INTERVAL CARDIO DRILLS TO SLIM DOWN 


APPROX. NIKEFUEL APPROX. CALORIES 
GET TONED x 434 ® 120 6 
2r 
GET STRONG > 


INCREASED WEIGHTS AND REPS TO BUILD STRENGTH 
SWEAT + SHAPE BAR RAISER 


GET FOCUSED > ° = ™ > 7 w> 


15-MINUTE WORKOUTS TO TARGET SPECIFIC AREAS 


v 


e LEARN MORE ABOUT NIKEFUEL » 


Noom 利用 游戏 中 的 “升级 ”概念 以 鼓励 用 户 不 断 参 与 和 提高 。 

还 采用 了 一 种 众所周知 的 人 简单 多 行 的 行为 改变 技巧 : RENK, 
我 刚 完 成 设置 流程 就 得 到 了 “优胜 者 奖金 "， 这 激励 我 进一步 参与 
uis 


图 8-20 
& HK Noom: 升级 和 惊喜 让 体 
验 游戏 化 


Play with the pedometer 


Keep me with you 
The built-in pedometer counts steps all 
p^ . day. Just keep the phone in your pocket, MT beh ^ 
e Play with the pedometer purse or elsewhere on you. Don't worry, it goal Overachiever Bonus 
won't drain your battery. ’ 


ctivity Tracking: Day 1 of 4 
One-meallogged 
em T" 
oe 


Your-calorie-budget 


Me yonl pd ii ze to add a 
bor 

This is optional, but can giv 
he: aa ‘art on tomorrow if 
like doi is a little e more toda 


you 
ay 


No thanks Yes 


C Notify me when I do well 


Setup your weight loss plan 


游戏 化 应 用 中 的 其 他 激励 机 制 还 包括 排行 榜 (Leaderboards) 和 点 
数 (Points), GasBuddy 以 “侦查 员 榜 ”(Top Spotters) 为 主要 特 
色 ， 而 Duolingo 则 用 数据 展示 最 佳 表 现 用 户 。 
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图 8-21 


iOS 版 GasBuddy 和 Duolingo: MS Estate BESIVe Tee, 
排行 榜 和 声望 点 数 M cus 


The 


top spotters 


easmythcrna 


STRENGTHEN SKILLS 
CHAMP 


TexasFight 


cy Joja78669 
e rthrbflyn 
cy PrimeLending 


e 
B 
C 
a 
Cg 
s 


在 Duolingo 中 ， 用 户 通 过 成 功 实现 一 组 技能 来 挣 得 “宝石 ” 
(Lingots), ， 然 后 可 以 用 赚 到 的 宝石 购物 ， 比 如 为 可 爱 的 小 猫 头 诡 
导师 购买 一 套 新 的 服装 。 


与 Duolingo 的 简单 机 制 相 比 ，Foodspotting 的 声望 系统 则 显得 元 
长 而 混乱 (http://www.foodspotting.com/about/faq)， 在 其 系统 里 ， 
用 户 必 须 赚 取 点 数 ， 才 能 为 喜欢 的 餐厅 授予 蓝 色 丝带 ， 这 个 丝带 
叫 作 “ 吃 货 ”(noms)。 如 果 你 的 激励 机 制 不 能 用 一 两 句 话 解释 清 
楚 ， 就 说 明 它 可 能 太 过 复杂 ， 以 致 不 能 如 你 所 愿 起 到 油 励 用 户 的 
作用 。 


[小 贴 士 ] 

党 试 使 用 这 种 模式 前 ， 
要 理解 游戏 化 和 行为 改变 
的 原则 。 要 保证 模式 简单 
有 趣 ， 不 要 在 不 适用 的 地 
方 强行 采用 游戏 化 。 


Lesson Complete! +10 xp 
Heart bonus! +2 xp 


o4 


You Earned 5 Lingots 


28 Learned the skill Basics 2 


Th F Sa Su M Tu W 


You're on track 

À J today. Good job! 
Pr 
L- 


Reached level 3 


@ — Spanish skits H$ Shop 


Earn lingots for achievements. Balance 
Get fun things with them. Q 12 
Basics 1 = Heart Refill 
um un | 


Allows you to regain one 
heart lost during a lesson. 


4 LINGOTS 


Phrases Basics 2 


- | | — | | Formal Attire 


Learn in style, sporting 
accoutrements that any 
gentleman or lady would 


Ls 
A 
admire. 


20 LINGOTS 
Food Animals Plurals 


0/5 0/4 0/1 


w Ñ 


Champagne Tracksuit 


Learn in luxury. Duo will 
love the feel of 24 carat 
gold silk on his feathers. 


( 30LINGOTS ) 


Practice Weak Skills 


图 8-22 
Duolingo 显示 相对 目标 的 学 习 进 
度 ， 在 用 户 完成 课程 后 给 予 宝石 
交大 


O Regstraron compere 


ey 


。 反馈 模式 
E ix 提示 (Error Messages)、 确 认 (Confirmation)、 系 统 状 态 
(System Status ) 


。 功能 可 见 性 模式 
Aid: (Tap)、 请 动 / 轻 扫 (Swipe/Flick)、 拖 搜 (Drag) 


反馈 模式 


用 户 体 验 行 业 协 会 (User Experience Professionals Association, UXPA) 
在 “可 用 性 设计 原则 ” (Principles for Usable Design, http://www. 
usability bok.org/principles-for-usable-design) 一 文中 谈 到 ， 优 秀 的 用 户 
界面 设计 应 该 为 用 户 “ 提 供 恰当 的 、 清 晰 的 、 及 时 的 反馈 ， 好 让 他 们 看 
到 自己 操作 的 结果 ， 并 知道 系统 发 生 的 变化 ”。 我 想 借 用 一 部 老 电影 中 
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的 经 典 台 词 ， 并 简写 成 : 
ETAR? pn 
反馈 有 各 种 形式 ， 从 简单 的 进度 指示 左 和 确认 信息 ， 到 更 为 复杂 
的 动画 和 特效 。 移 动 反馈 模式 包括 错误 提示 、 确 认 和 系统 状态 。 


“给 予 反 馈 意 味 着 用 户 永远 不 必 说 : “发 


错误 提示 
错误 提示 应 该 用 直 白 而 非 代 码 式 的 语言 表达 出 来 ， 精 确 地 指出 问 
题 所 在 ， 并 给 出 建设 性 的 解决 建议 。 最 佳 实践 是 在 一 页 上 突出 显 
示 错 误 提 示 ， 这 样 的 例子 有 Soundwave 和 Pandora。 这 种 设计 方案 


比 模 态 对 话 杠 更 好 ， 因 为 模 态 对 话 框 遮挡 住 了 问题 ， 比 如 Square 
Register 和 Pinterest 的 设计 。 


T-Mobile 二 3:48 PM 


Y 7 You must agree to the terms of use to 
continue. 

Create a Soundwave Account 

Email theresa@tnid.com 


theresaneil@gmail.com 


Password €eeeeee 


Birth year 1977 


Zipcode 78751 


Passwords do not match. 


Cancel 


Gender Female 


By creating an account, | accept Soundwave's 


and : 
; Send me personalized recommendations 


v and tips from Pandora. 


| have read and agree to the Terms of 
Use and Privacy Policy. 


IIS 


Go back Register 


a es a Ee o Ue 
t Eod dedo do d bo € 
sies _ Done 


图 9-1 
4 = 版 Soundwave 和 iOS 版 


Pandora: 突出 的 错误 提示 
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图 9-2 
iOS 版 Square Register 和 Pinterest: 


错误 对 话 框 挡住 了 错误 


[小 贴 士 ] 

用 直 白 的 语言 说 明 错 误 ， 
并 提供 解决 方案 。 把 错误 
提示 设计 在 页 面 内 ， 好 让 
错误 可 见 ， 而 不 是 把 错误 


CTESD 


Xx * 10:17AM 
Sign Up 


Theresa Neil 


j Sorry, but that email 
address is already in use. 


Name Is Invalid 
Please enter both a first and last 
name. 


Terms of Service and Privacy Policy 


OK 


如 采 你 能 预防 错误 ， 那 就 更 好 了 。 参 看 “确认 ”模式 中 对 预防 错 
误 的 行内 反馈 及 错误 提示 的 设计 建议 。 


确认 

在 执行 一 项 操作 时 ， 要 提供 确认 。 但 不 要 使 用 “上 叫 春 的 对 话 框 ” 
RIEN, Fein RE Bf HauteLook 应 用 ， 而 要 寻找 不 会 打 
断 用 户 操 作 流 的 提供 确认 反馈 的 方法 。( 更 多 关于 “ 思 硫 的 对 话 
框 ” 的 反 模 式 的 内 容 ， 请 参见 第 11 章 “ 上 叫 者 的 对 话 框 ”一 市 。,) 
举例 来 说 ，iOS 版 亚马逊 和 Zappos 应 用 都 使 用 了 动画 来 表示 一 件 
商品 被 加 入 了 购物 车 ， 且 购物 车 的 商品 数量 随 之 更 新 。 


Item was added to Cart 


Continue 
Shopping 


The item was added to your cart! 


Continue View Cart 


No Service # `$ 3:46 PM (7% B7 
< Kindle Fire HDX 8.9", HDX... [1] 
1star BOO 60 


No Service = 3:45 PM CT»? D 


< Kindle Fire HDX 7", HDX... [| 


e utur: 一 一 一 一 wry 
1 star: B (103) 


Customers Who Viewed This Also Viewed 


Kindle Fire HDX 8.9", Kindle Fire HD 7", Kindle Fire ! 


Customers Who Viewed This Also Viewed 


Kindle Fire HDX 7", Kindle Fire HDX 8.9", Kindle Fire 


HDX Display, Wi-Fi... HD Display HDX Dis HDX Display, Wi-... HDX Display HD Dis; 
$444.00 $284.00 
In stock on December? * “913 In Stock 
Ships/Sold by Amazon.com 


Ships/Sold by Amazon.com 
Gift-wrap available 


Choose FREE Super Saver Shipping for delivery by 
Christmas. 
Read more about holiday shipr 


n Q Ww d eve 


Wish List More 


Gift-wrap available 


n Q Ye eae , 


Wish List More 


Home Search Cart 


图 9-3 

安 卓 版 亚马逊 和 iOS 版 HauteLook: 
EU B S A e EST NE Y A A E 
程 


图 9-4 

iOS 版 亚马逊 : Kindle "3E" F| 
购物 车 里 ， 购 物 车 中 的 商品 数 立 
即 更 新 ( http://www.youtube.com/ 
watch?v=--JZNARO eM ) 
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图 9-5 
iOS 版 Zappos: 超级 猫 “飞翔 ” 
着 把 一 件 商品 送 进 购 物 车 ， 购 物 
车 中 的 商品 数 立 即 更 新 (http:// 
www.youtube.com/watch?v-JxADy- 
3HOjc ) 


图 9-6 


iOS 版 Gilt 和 BestBuy: 在 购物 
车 旁边 显示 页 面 内 提示 ， 确 认 商 
品 已 被 加 入 购物 车 
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KEEN KIDS 


《 Back 


Check out our awesome product video! 
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ADD TO CART 
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Ss = 


WOMEN'S SIZE: 
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WOMEN'S WIDTH: 


PRODUCT DETAILS: 


Back to school looks just got more fun with the sweet style 
and pops of color in the Harvest MJ from Keen Kids! M... 


rue to width. Moderate arch 
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Home Cart Search My Account More 


No Service + 3:48 PM 


< Back KEEN KIDS 


Check out our awesome product video! 


HOT CORAL: 


Ss = 


WOMEN'S SIZE: 


Make Selection 8 Toddler 9 Toddler 10 K 


WOMEN'S WIDTH: 


PRODUCT DETAILS: 

Back to school looks just got more fun with the sweet style 
and pops of color in the Harvest MJ from Keen Kids! M... 
REVIEWS: 

This product currently has 2 reviews 


OVERALL: ®ve ww 
COMFORT: RAA ww 
STYLE: RÉA AÁ 


Felt true to size. Felt true to width. Moderate arch 


& PpP 2 … 


Home Cart Search My Account More 


9:08 AM 


European Brands: Up 
to 80% Off 


Added to your Cart. Checkout Now 


Frenchy Yummy 

Brandon Bermuda Shorts 

$19 $66 

Size (US): 5 


La. M A 


Add to Cart 


另 一 种 设计 方案 可 见于 Gilt 和 BestBuy， 这 种 方案 除了 更 新 购物 车 


中 的 商品 数 ， 还 会 在 购物 车 附近 显示 提示 信息 。 


No Service = 9:02 AM C 了 fp 
三 oc xe 
Added to Your Cart 


Samsung - 32" Class (31-1/2" Diag.) - LED - 
1080p - 60Hz - Smart - HDTV 

Reg. Price: $479.99 

$349.99 


Ed 
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Ge Model: 2YR 300-34 | 
SKU: 9961303 


PROTECTION $39.99 


5-Year Protection Plan 


Model: 5YR 300-34 | 
SKU: 6914227 


PROTECTION $69.99 


2-Year Protection Plan 


这 些 是 购物 车 的 示例 ， 但 是 将 一 个 项 目 加 入 任何 类 型 的 列表 中 时 
都 需要 用 户 确 认 。 比 如 说 ，RetailMeNot 使 用 了 动画 来 显示 一 项 内 


容 被 保存 到 什么 地 方 去 了， 同样 重 要 的 是 ， 显 示 了 此 后 可 以 在 哪 
里 找到 保存 的 项 。 
Searching... + 11:23 AM C THER — Searching... = 11:23 AM 77! 
e * € * 


| In-Store Offers | onine ones | 


Up to 75% Off Sitewide with your 
30% Off coupon * 


Staff Pick Exp. 12/24/2013 


| In-Store Offers Online Offers 


Up to 75% Off Sitewide with your . 
30% Off coupon Xr 
Staff Pick Exp. 12/24/2013 RS 


15% Off Sitewide + Free Shipping 


PS 15% Off Sitewide + Free Shipping * 
Staff Pick Exp. 12/31/2014 - Staff Pick Exp. 12/31/2014 
$10 off coupon with $40- gift card $10 off coupon with $40+ gift card 
PA A mm 上 mm = 
O 4 © 1 


Favorited Find Locations Favorited Find Locations 


行内 反馈 是 一 种 很 好 的 提供 确认 的 设计 模式 ， 这 样 的 例子 有 iOS 


版 K 还 。 这 种 模式 特别 适用 于 表单 ， 当 提交 无 效 数据 时 ， 会 触发 多 
个 错误 提示 。 


VERE, ECan PER. BARR ANA 
这 个 操作 于 


行内 反馈 也 应 该 用 于 功能 
悉 安 里 请 动 删除 这 个 设计 惯例 的 话 ， 我 要 提醒 一 个 ， 
势 从 根本 上 不 同 于 1O0S 上 的 请 动 删除 。 


我 们 以 安 早 版 Gmail 为 例 ， 沸 动 一 封 邮件 会 立即 将 其 存档 ， 这 是 
由 型 的 “请 动 执行 操作 ”(swipe-to-perform) 的 手势 。 行 内 反馈 会 
显示 这 封 邮件 被 存档 了 ， 同 时 提供 撤销 存档 的 选项 。 


图 9-7 

iOS 版 RetailMeNot: 动画 显示 
保存 操作 以 及 在 哪里 可 以 访问 保 
存 的 项 ( http://www.youtube.com/ 
watch?v=wF qxjlo4ucE ) 


反馈 与 功 E 可 见 性 | 247 


图 9-8 
iOS 版 Kik: 在 填写 表单 字段 时 ， 


行内 反馈 用 来 确认 有 效 数据 


图 9-9 
Z Gmail: 滑动 删除 手势 触 
发 行内 确认 ， 同 时 带 有 撤销 操作 
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[| Saving screenshot... 


= © Inbox < 
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» Jake Cornelius 12:46 PM 
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» O'Reilly Webcasts 1206 PM 
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» Digital-Tutors 11:57 AM 
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Your TWC Bill in now available] Margaret... Yr 
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Iconsulting (@IconsultingBl) replied to 
one of your Tweets! — @theresaneil... 次 


» O'Reilly School of Tec... 10:44AM 
New Year, New Skills, New You - Save 
$100 on All Online IT Courses — Save... Ww 


对 照 来 看 ，iOS 系统 的 邮件 应 用 (Mail) 是 “滑动 显示 ”(swipe- 
to-reveal) 手势 的 示例 。 背 动 一 封 邮件 时 只 显示 可 选择 的 操作 ， 而 
设 有 执行 任何 操作 。 在 这 个 例子 中 ， 需 要 使 用 第 二 个 手势 一 一 点 
击 ， 才 会 存档 邮件 。 在 这 里 不 需要 点 击 后 的 行内 确认 反馈 ， 因 为 
该 邮件 会 从 列表 中 消失 ， 下 面 的 邮件 以 动画 效 采 自动 上 移 。 


No Service # +s 3:59 PM CTI , 
X Mailboxes Inbox Done 
Q Search 


12:07 PM 
] 1 other followed 
lowers on SlideShare 
il, Good news! David 


Archive 


@ O'Reilly Webca 12:06 PM 
Learn from Experts\Xive: CSS3, Resp... 
Learn from experts online, for free View 
in browser. Webcasts Learn from exp... 


O9 Digital-Tutors 11:57 AM 
Training for NUKE 8 + More Maya, Cl... 
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3D Assisted Facial Morphing in CINE... 


9 noreply.statements@t... 11:26AM 
Your TWC Bill is now available 
Margaret Neil, Your Time Warner Cable 
bill statement is now available online.... 


@ Iconsulting (via Twitter) 11:07 AM 
Checking for Mail... ei 


男 一 个 提供 确认 的 方案 是 使 用 一 种 叫 作 “Toast” 的 上 暂时 通知 。 这 


种 通知 短暂 地 停留 在 屏幕 上 (5 秒 或 更 短 )， 然 后 消失 不 需要 
用 户 进 行 额外 的 点 击 操作 。Toast 通知 确认 刚刚 执行 的 操作 ， 并 提 
共 一 个 撤销 选项 ， 如 Gmail 和 Boxer 中 设计 的 那样 。 


图 9-10 


iOS 系统 的 邮件 应 用 : 滑动 显示 
操作 ， 点 击 存档 ; 不 需要 行内 


确认 
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图 9-11 
iOS 版 Foursquare 和 t x 版 
NYTimes: 简单 的 Toast 通知 


图 9-12 
iOS 版 Gmail 和 Boxer: 暂时 Toast 
通知 提供 确认 和 撤销 选项 
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mA A Theresa Neil 1:57 PM 


(No subject) 


Archived 


像 乎 果 App Store 云端 下 载 图 标的 多 状态 按钮 和 Audible 指示 下 载 
进度 的 进度 指示 缘 ， 都 是 在 不 打 断 操作 流 的 前 提 下 提供 确认 反馈 


的 方法 。 注 意 ，Audible 在 有 声 故 事 下 载 了 一 部 分 之 后 会 显示 提示 
“点 击 播放 "， 让 你 知道 不 用 等 到 下 载 完 就 可 以 开始 收听 。 
1 — card | 30 = eo -— card | 30 ai eo 1 — card | 30 — [x] 


Discover 


DISCO VER Doonor € Mobile 


DISC@VER Discover UH 3 
Jiscover Finan 二 


* x & & 2 (16) 


® | Discover Finan 
se ee e d : 
eke x x (16) 


OPEN : 


No Service > 4:01 PM 4 4 No Service = > 


€ Boston Jacky (Unabridged) 


4:02 PM F 4 No Service ^ : 


<- Boston Jacky (Unabridged) 


4:02 PM 1 


<- Boston Jacky (Unabridged) f 


2 Parts C Refresh Download All 2 Parts C Refresh Download All 2 Parts C Refresh Download All 


te d Part 
VS Downloading: Tap to play 
c : Se MB of 71 MB, 0:33 remaini... 


在 完成 一 个 事项 后 ， 比 如 下 一 个 订单 或 提交 一 张 表单 之 后 ， 通 常 应 
该 提供 更 突出 的 反馈 。 因 为 这 些 事件 第 出 现在 流程 的 最 后 ， 所 以 这 
时 可 以 使 用 全 屏 或 对 话 框 式 的 确认 反馈 ， 像 Check 和 Google Play 
中 设计 的 那样 。 


图 9-13 
iOS 版 App Store: 多 状态 按钮 从 
“下 载 ” 变 成 “进度 ”指示 ， 再 


变 成 “打开 ” 


图 9-14 
iOS 版 Audible: EGE mB HE 
供 反 馈 和 行为 召 


[小 贴 士 ] 
在 执行 操作 后 提供 确认 反 
Sn, 但 不 要 打 断 操作 流 。 把 
确认 元 素 设 计 成 整体 流程 
的 一 部 分 。 
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图 9-15 
安 卓 版 Check 和 Google Play: 完 
成 一 个 事项 需要 给 予 醒 目的 反馈 


图 9-16 
本 书 第 1 版 中 的 加 载 指示 器 示人 


I : 
Z Pay a Bill 


Success! 


Your bill has been paid 


AT&T 


$62.72 


Amount: 


Date paid: Thu Jan 17 


Reference ID# KOE59J 


You can cancel this payment any time 
before 4:30PM PST on January 17, 2013 


Payment successful 


Be Google play 


在 本 书 第 1 版 中 ， 我 鼓励 移动 设计 师 和 开发 者 使 用 与 网 页 端 和 桌 
面 软件 相同 的 技术 来 显示 系统 状态 。 
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Pages WhitePages 
Yellowpages.c... 

KKK Free 妈妈 妇女 六 Installed 


= Loading... 


通 当 来 说 ， 这 些 技术 就 是 加 


在 那 之 后 ， 第 2 草 中 我 们 提 到 Luke Wroblewski 发 表 了 一 篇 有 趣 的 
文章 ， 题 目 是 “避免 使 用 spinner 下 拉 菜 单 ”(Avoid the Spinner, 
http://www. lukew.com/ff/entry.asp?1797=). 4t JF AHI Pz FA Polar 发 
布 了 一 个 添加 了 spinner 下 拉 某 单 控件 的 版 本 ， 他 说 从 那 时 起 他 开 
始 收 到 越 来 越 多 这 样 的 用 户 反 馈 : 
好 像 刷 新 和 加 载 页 面 都 要 等 待 很 长 时 间 ， 看 起 来 没有 上 一 
版 那么 快 了 。 


如 果 Luke 因为 一 个 简单 的 spinner 控件 而 受到 那样 的 抱怨 ， 那 我 
只 能 推出 ，Level 应 用 在 加 载 页 面 时 显示 一 只 绥 绥 扑 过 页 面 的 蜗牛 
的 设计 ， 也 会 引起 同样 的 抱怨 。 


Luke 总 结 道 : 


我 们 使 用 的 这 些 进 度 指示 器 促使 用 户 盯 着 加 载 画 面 看 ， 就 
像 看 着 表 针 一 分 一 秒 走 过 去 一 样 。 结 果 人 们 党 得 时 间 变 慢 
了 ， 整 个 应 用 的 速度 也 变 慢 了 。 我 们 专注 于 指示 器 而 不 是 
进程 ， 由 此 得 出 的 结论 是 ， 你 应 该 清楚 地 让 用 户 明白 ， 你 
在 向 目标 推进 ， 而 不 是 让 用 户 等 待 加 载 画 面 。 


w...AT&T LTE 9:42 AM my 0000 T-Mobile = 6:01 PM $ Eo 图 9-1 rá 
c PROFILE Bank Signin iOS 版 Polar f! Level: 让 用 户 杂 
着 加 载 画面 


Levelis linking your Discover 
accounts. This could take a 


moment... 


Would You Recommend Polar To 
A Friend? 


也 有 一 些 好 的 设计 方案 让 用 户 专 注 于 进程 ， 而 不 是 加 载 画 面 。 比 
如 谷歌 的 加 载 页 面 从 侧 边 滑 出 ， 让 用 户 感觉 内 容 会 立刻 加 载 进 来 ， 
即使 情况 并 非 如 此 。 这 种 过 流动 画 实际 上 就 是 加 载 指示 屁 。 
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图 9-1 8 wt. AT&T 4 2311 Poa 12:28 PM 3 ot. AT&T A 12:28 PM A 
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123 @® A| space | Search e Q Q | 


现在 Polar 采用 了 构架 页 面 (skeleton screens) 的 方案 ， 构 架 页 面 
本 质 上 是 一 个 空白 页 面 ， 信 息 在 该 页 面 上 和 逐步 加 载 进来 。 


图 9-1 9 w...AT&T LTE 9:42 AM " ws... AT&T LTE 9:42 AM 
iOS 版 Polar: 逐步 加 载 的 构架 bu < PROFILE € PROFILE 
面 作为 进度 反馈 pier 
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Would You Recommend Polar To 
A Friend? 


Would You Recommend Polar To 
A Friend? 


Would You Recommend Polar To 
A Friend? 


一 些 应 用 在 初始 化 配置 或 注册 时 需要 很 长 的 等 待 时 间 。SigFig 和 
Smartr 显示 了 两 种 让 用 户 知道 应 用 进程 的 方案 。 
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T-Mobile ^ 8:26 PM 


Indexing Accounts... 


Explore your network. 


Search by name, 


company, initials, 


> title or email 


SMartr Contacts | 


Discover photos 
and tweets from 


3 Amy Villanova your contacts 


如 采 是 很 长 的 进程 ， 要 提供 一 个 取消 选项 ， 比 如 Story Board 在 生 


成 一 部 电影 时 的 设计 。 


图 9-20 

iOS 版 SigFig: 在 后 合 创建 投资 
组 合 时 ， 实 时 反馈 显示 每 项 任务 
的 完成 百分比 


图 9-21 

iOS 版 Smartr: 在 索引 联系 人 的 
时 候 (进度 条 显示 在 上 方 ) 介绍 
产品 功能 


[小 贴 士 ] 

为 系统 状态 提供 反馈 ， 但 
要 让 用 户 专注 于 进程 ， 而 
不 是 等 待 。 为 可 能 耗费 时 
间 的 操作 提供 取消 选项 。 
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图 9-22 


iOS 版 Story Board: 长 进程 可 以 


取消 


No Service > 7:21 PM 


Generating... 


Generation movie now... 
Please wait without closing the app 


功能 可 见 性 
功能 可 见 性 是 指 ， 一 个 对 象 具有 让 用 户 知道 它 可 以 用 来 执行 一 项 
操作 的 特性 。 抽 层 把 手 和 门 把 手 就 是 现实 生活 中 的 示例 。 软 件 中 
前 见 的 功能 可 见 性 示例 包括 拖 搜 手柄 、 卷 起 的 页 脚 ， 以 及 按钮 和 
请 块 等 3D 控件 。 


由 于 移动 设备 可 以 利用 单 点 触 模 和 多 点 触 模 手 荔 ， 可 行 的 功能 
见 性 方案 很 多 ， 实 现 它 们 的 技巧 也 很 多 。 在 此 我 们 只 讨论 一 些 曾 
见 的 点 击 、 斌 动 / 轻 扫 和 拖 搜 方式 的 功能 可 见 性 。 


Ln 

(Beet BUR BA 2k EY DUE D EH HS eT A Lea a Ee AY RH. 
然而 ， 局 平 化 设计 的 兴起 让 这 些 技巧 对 设计 师 来 说 不 再 那么 有 效 。 
实际 上 ， 一 些 人 认为 局 平 化 设计 降低 了 许多 应 用 的 可 用 性 。 


Jakob Nielsen 是 一 位 知名 的 用 户 体验 咨询 师 兼 作家 ， 他 在 Windows 
8 上 进行 了 一 个 可 用 性 测试 (httpz//www.nngroup.com/articles/ 
windows-8-disappointing-usability/)。 他 发 现 ， 操 作 系 统 的 局 平 化 
设计 让 用 户 难 以 分 辨 哪些 东西 是 可 以 点 击 的 。 在 下 面 的 例子 中 ， 
Nielsen 的 许多 测试 题 都 错 把 “更 改 系统 设置 ”作为 图 标 下 的 一 个 
静态 标签 ， 但 实际 上 它 是 一 个 可 点 击 的 操作 命令 。 


[CJ 


Screen 


TD 
56 


Notifications Keyboard 


Change PC settings 


不 是 说 局 平 化 设计 不 能 体现 功能 可 见 性 ， 只 是 它 要 求 更 高 的 设计 
技巧 才能 使 其 正确 实现 。Luke Wroblewski 在 其 撰写 的 另 一 篇 精彩 
文章 谈 到 了 他 在 为 i0S 7 版 Polar 更 新 视 党 设计 时 的 经 验 (http:// 
www.lukew.com/ff/entry.asp?1800), ， 甚 中 一 个 要 点 是 : 


要 为 页 面 上 不 同 的 元 素 设 计 出 有 意义 的 差异 ， 去 掉 纹 理 和 
纵深 使 得 剩余 的 视觉 设计 工作 更 加 困难 。 我 认为 这 是 “ 扁 
平 化 设计 ”更 难 的 一 个 主要 原因 。 它 迫使 你 简化 ， 从 而 达 
到 使 用 更 少 的 视觉 联系 提供 同样 清晰 的 视觉 传达 的 目的 。 


LUKEW ASKS LUKEW ASKS 
Summer Job: Drive A Google Summer Job: Drive A Google es 
Street View Car... Street View Car... 


ke A Boss OR Not So Boss Like A Boss OR Not So Boss 


Z9 COMMENT SHARE RESULTS Q 
Jello | want that job JELLO | want that job 
jhylandS693 Id love the job as long as | don't have JHYLANDS693 Id love the job as long as | don't have to 
to drive a Prius drive a Prius 
LUKEW ASKS 
Summer Job: Record Google rm 
LUKEW ASKS 
Summer Job: Record Gooale Kn 


图 9-23 
微软 Windows 8: 扁平 化 设计 可 
能 降低 了 可 用 性 


[小 贴 士 ] 

差劲 的 局 平 化 设计 会 损害 
应 用 的 整体 可 用 性 。 在 设 
计 阶 段 准备 好 更 多 次 迭代 
以 保证 可 操作 元 素 不 会 被 
扁平 化 视觉 效果 淹没 。 


图 9-24 
iOS 7 版 Polar 的 早期 设计 迭代 
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滑动 / 轻 扫 
通过 背 动 操作 实现 功能 可 见 性 的 方式 有 很 多 。 类 似 iOS 页 面 指示 


arte AE ( 即 页 面 底 端 的 小 圆 点 ) 的 设计 已 被 网 页 和 移动 应 用 所 广 
沁 采 用 。 


图 9-25 
iOS 7 版 Polar: 后 来 的 迭代 版 本 
使 不 同 的 页 面 元 素 更 明显 


LLLI Is AT&T F 


The Bat of The Clown, 
Course Naturally 


COMMENT SHARE RESULTS 


HEMAN ASKS 
Wanna Be Startin' Somethin'? & 


Mama-say OR Mama-sah 


Qa 06 o tà ®@ 


图 9-26 oil MegaFon => 9:37 AM T-Mobile + 10:40 PM 
iOS 版 国家 地 理 城 市 指南 ( City d Me 
GEOGRAPHIC AĜA Rally Interactive 
Guides by National Geographic ) Listening Time eooo 
和 Audible: 页 面 指示 器 分 别 位 


于 底 端 和 顶端 


LONDON 
Cl tg 
35 96 


ats for iTunes Title 


> NOt Collec 
when the app is in the ba zie 


VIEW GUIDE 


还 有 一 种 方式 是 ， 在 页 面 边 绿 不 显示 完整 内 容 ， 以 瞳 示 页 面 侧 边 
或 下 方 还 有 更 多 内 容 。 
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No Service + 


— - ~ 
: eer 
| VTS z 
Lemon, Pistachio and 
Cranberry Wreath 
Cookies 


Rachel Rogers 
holiday ideas 


Squish and Seek Sight 
Words 


Marissa Smith 
Teaching 


| Best photography ideas 
for maternity and 
newborn pictures! PIN 


Qa + F a 


The Centered School 


Continue Watching for Theresa 


J mE sil 
$ 


Curious George: A Very Monkey Christm 


Popular on Netflix 


TT OERA. 


深 动 条 也 是 一 种 可 选 方 案 ， 尽 管 它 在 移动 应 用 中 不 那么 第 见 。 演 
动 条 也 可 用 作 快 速 跳 转 到 某 一 位 置 的 触摸 对 象 。iOS 版 Skype 使 用 
了 字母 表 滚 动 条 ， 让 用 户 可 以 跳 到 特定 的 区 块 ， 安 早 版 Skype N 
使 用 了 市 有 拖 搜 手柄 的 可 隐藏 式 六 动 条 。 


11:06 AM 
《 Lists All Contacts 
Recent Favorites People 

— 
||... Adam Ali 
ee Q) Offline with voice messaging 
E Ahmer Andre 6 
ee & Offline | 

= Angie 
mu Ali 
- x) Offline anna- 
ee | 
Ew Andre 
E By wak Astrid 

* Available 

B Angie B 
(iB 
Bag © balderdashy 
anna : — 

^J Go Offline benjamincrothers 
|. Astrid 

B Ge # Q 

People Recent Call Phones Profile 


TH fth oie ste Bedae ge up PERTH ES Peg EE mU (Cover- 
flow) / EF, ZHE (Rolodex) URHEA) (Photo Stack) 。 


图 9-27 

iOS 版 Pinterest fu Z & fk Netflix: 
页 面 溢出 暗示 如 何 操作 才能 查看 
未 显示 出 来 的 内 容 


图 9-28 
iOS 版 和 安 音 版 Skype: 
滚动 条 设计 


不 同 的 
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图 9-29 
iOS 版 RetailMeNot 和 Safari: 封 
面 流 的 功能 可 见 性 设计 上 暗示 水 平 
滑动 ， 名 片 盒 的 功能 可 见 性 设计 
Ht as SE ELE 


图 9-30 
iOS 版 Potluck: 优秀 的 滑动 功能 
可 见 性 设计 ， 但 对 “ 滑 走 的 故事 
到 哪里 去 了 ”的 提示 可 以 设计 得 
更 好 (http://www.youtube.com/ 
watch?v=pcfNFuvvdrA ) 


Potluck 使 用 了 堆 县 的 卡 族 来 引导 请 动手 势 。 丫 左 请 动 可 以 跳 过 当 
前 的 故事 ， 辐 右 请 动 可 以 保存 故事 。 然 而 在 我 第 一 次 使 用 时 并 设 
有 广 意 到 这 些 ， 我 不 知道 如 本 我 把 一 则 故事 请 挥 了 ， 怎 样 才 能 找 
回 它 。 之 后 我 碰巧 试 着 用 拖 搜 手势 代替 宰 动 。 拖 搜 会 显示 出 一 个 
fer, ‘tr Uri) ABT AMHR, [BTE ALEKS BABIES 
IH TD e FESS UH JJ. 


No Service ^ 3:57 PM uUTqim» 


X Getting Pushy with Mobile Affordances | Float... 


lOat 


mobile learning 


| Search Website 
Join LinkedIn 
Linked [J 


JOPemey go 


Tet: 1-866-328-0110 


20% Off bat. tron 25% OF 
Online 


Reset your passphrase | Simple 


Your Favorite Stores CS simpere 


Reset your passphrase 
it's cool, Ir happens to the bost of us, 


DSW SW sername or emai n 
Ma NS 
N SNP 法 Helpdesk : Boxer Support 


Private | 


Here's why you have to What | keer identify these 
stop skipping breakfast stop aa > mashup acti 
Bese oe overe figures? Proin and croiss@§Kip >< 
newsfee neatorama.com e breakfast of 
ampions 
uardian.com 


Obviously Lorde has 


zii ttu RT LA 5 LA ea oA, SLA Allthecooks 在 侧 边 栏 菜单 
打开 时 “弹跳 ”着 提示 : 水 平 背 动 手势 可 以 显示 完整 末 单 。Flipboard 
上 下 翻动 页 面 一 角 ， 引 导 用 户 使 用 其 著名 的 垂直 页 面 请 动手 势 。 


图 9-31 


dt Æ nk Allthecooks ( http://youtu. 
be/iLlCs-gyNaE) # iOS 版 
Flipboard ( http://www.youtube. 
CAT com/watch?v-rQASZtuvBCs ) : 
Garden eem To 用 动画 实现 功能 可 见 性 


he with a Chive Di 
li Ean ui 


Fresh Garden Salsa 


AMERS Picy. Peach and He 国王 三 二 
Tomato Broth Tomato Sa 


vervthina from here 
ou can see everything fro 


Ratatouille ». Get Started Sign In 


在 第 7 XB, SIS Mailbox 以 及 Fantastical 的 例子 ， 说 明了 如 
何 设 计 一 个 交互 式 导 引 ， 可 向 用 户 适 时 地 介绍 要 用 到 的 手势 。 


在 吸引 用 户 清 动 操作 方面 ， 文 字 的 方式 起 不 到 作用 ， 这 一 点 已 被 
证 实 ， 所 以 不 zm 试 试 别 的 技巧 吧 。Silvercar 的 早期 
版 本 用 文字 提示 用 户 同 侧 边 清 动 ， 之 后 的 版 本 已 经 改 用 垂直 请 动 。 
AA ie eB ee i ee 动手 势 的 功能 可 见 性 。 


il AT&T 3G 6:30 PM O Pee 图 9-32 
YOUR RESERVATIONS y+ | 5B YOUR RESERVATIONS a3 10S hk Silvercar: T H D: it as 用 
T i 水 平滑 动 和 文字 提示 ; 改版 后 使 
PICK-UP "NIFH MON SEPT 17, 2012 9:00 AM 用 垂直 TH 动 


MON SEPT 17, 2012 9:00 AM TR 
> T8 p] 


ADFW RETURN 


WED SEPT 19, 2012 8:00 AM UPCOMING WED SEPT 19, 2012 8:00 AM 


Save time at the airport by completing 
your Silvercar profile now. Then simply 
pick your Audi A4, scan the code, and 


YOUR SILVERCAR get on the road. 
pe RAPET aby YO U COMPLETE YOUR PROFILE 


Get where you want to go even faster. 
Add your saved Online Destinations to 
the in-car navigation system 


反馈 与 功能 可 见 性 | 261 


拖 搜 
在 移动 设备 上 ， 


编辑 模式 ， 或 者 长 按 。 
编辑 模式 ， 也 可 以 拖 搜 应 用 重新 排序 。 


"LH. 


图 9-33 
iOS 7: 长 按 可 以 拖 搜 应 用 图 标 
或 删除 应 用 


No Service + 


Expedia Ness 


@ Ss of F ð 
wie feed 
Ula 


feed 


到 » 


:OOHLALA TrendArY 


Q. O, O 
fA 


Ytrulia Ytrulia 


Trulia For Rent 


E Buc 
op 


$ 


Zillow 


. Mortgages iHomeAfford Park Guides Foursquare 


"S x 75 iQ 


Messages Google Maps 


Phone Boxer 


一 役 先 要 进入 一 个 模式 才能 使 用 拖 搜 榨 作 ， 比 如 


你 可 以 长 按 任何 应 用 图 标 进 入 
也 可 以 在 这 个 模式 下 删除 


arc ching.. 


Expedia 


x hm 


Loo feed 
KA ule 


a o. Te, Google o. inspoon 


m D^ fi 


:OOHLALA TrendArY o. 2Pages Trulia 
ey PE 
& e 3 


RENT op 
Ytrulia Ytrulia 
For Rent Mortgage Zillo 
Q DOS Q 7.9 
Son & % National 
pop $ = Parks 


Zillow 


. .Mortgages iHomeAfford Park Guides Foursquare 


LJ IA E NM NA MD. 


[B x 75 eQ- a 
多 
~~ NM w - 


Phone Boxer Messages Google Maps 


在 安 草 系统 中 ， 长 按 一 个 应 用 图 标 会 显示 “ 拖 放 区 域 "， 在 这 个 
状态 下 ， at lon 
面 端 的 垃圾 桶 图 标 一 样 ， 这 一 概念 已 经 过 时 了 。 但 这 个 设计 中 ， 


真正 有 反 模 式 的 地 方 在 于 ， 


查看 应 用 信息 ， 用 户 必须 先 把 应 用 


图 标 搜 进 应 用 信息 拖 放 区 。 就 说 说 这 UH A AIO, BARRE, 


— 7 ERE AY FRR SEXE TR ORL, RAIL EE "EE 
动 “删除 和 “FAT”. uh RAD ”会 激活 编辑 模式 ， 并 
显示 页 面 拖 放 区 ， 就 像 现 在 的 长 按 设计 一 样 。 

这 些 拖 搜 的 示例 全 都 没有 任何 功能 可 见 性 ， 用 户 必 须 自己 去 发 据 。 
用 户 确 实 愿意 把 玩 操作 系统 ， 学 习 一 些小 把 戏 ， 但 不 要 断定 他 们 
也 会 如 此 对 竺 你 的 应 用 。 

在 应 用 中 ， 了 最 贡 见 的 拖 搜 功能 可 见 性 是 手柄 。 手 柄 笛 冰 在 明确 地 


进入 编辑 模式 之 后 显示 出 来 。 手 柄 适合 用 来 排序 列表 项 ， 比 如 
Wunderlist 和 Lemon Wallet 中 的 设计 。 


图 9-34 

安 早 操作 系统 : 拖 搜 选 定 的 应 用 
到 新 的 屏幕 中 ,或 是 放 到 “ 缉 载 ” 
或 “应 用 信息 ”的 拖 放 区 
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图 9-35 TET: i —— 
iOS 版 Wunderlist: 任务 列表 的 | Inbox bone 


编辑 模式 下 ， 右 侧 显 示 拖 搜 手 柄 orm 


Start RWD training mater... 
Bist wp training matt 
Start RWD training mater... 84 Completed Items sms 


& © 


图 9-36 — 
iOS 版 Lemon Wallet: 点 击 操 作 
栏 的 “ 拖 搜 ”图 标 进 入 编辑 模式 ， a en Be 
同时 显示 拖 搜 手 柄 


Wallet 


一 些 拖 搜 手柄 默认 可 见 ， 比 如 背 块 控件 上 的 手柄 和 抽 层 中 的 手柄 ， 
如 Expedia 和 Lootsy 所 示 。 


图 9-37 e2900 T-Mobile > 4:33 PM ES Megafon @ 20:05 
iOS 版 Expedia 和 Lootsy: 一 些 Cancel Search Flights — | Search | LOOTSY 


BAP IHC IL, IPAE 
— : 


November 2013 > 


S M T W T F S 


Nov 28 - Nov 30 


Drag end dates to modify 


2 27 GB ?» 国 


Cancel Send Offer 


设计 和 配置 类 应 用 不 只 有 拖 搜 移动 ， 还 拥有 拖 搜 旋转 和 拖 搜 调整 
大 小 这 样 更 复杂 的 拖 搜 交 互 。 在 拖 搜 功能 可 见 性 上 ，Aviary 和 
Homestyler 都 是 值得 研究 的 示例 。 


Cancel 


No Service + 


图 9-38 

iOS 版 Aviary: 多 手柄 裁 切 ; 单 
手柄 调整 大 小 、 旋 转 以 及 放置 贴 
图 


图 9-39 

iOS 版 Homestyler: 为 重新 布置 
所 选 物件 提供 了 清晰 的 功能 可 见 
性 


[小 贴 士 ] 

拖 搜 手柄 、 选 中 对 象 和 拖 
放 区 域 要 选用 易于 识别 的 
设计 方案 。 通 过 测试 来 判 
断 是 否 需要 设计 一 个 视觉 
吸引 向 用 户 介绍 该 功能 。 
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7 2 
3 4 8 
: "Ow 
Wey. “Per 

; Rooy “Fong 

1 sCnphor ç 4 8 

a) d nph Ae 

4) 


。 帮助 模式 
入 门 介绍 (How-Tos)、 用 户 指 南 / 帮 助 系统 (User Guide/Help 
System), # Ulla] aise A (FAQs)、 功 能 使 用 辐 导 (Feature Tours), 
新 手 引 导 (Tutorials), E P XC BJ (Contextual Help), x Æ he tt 
(Capture Feedback ) 


BATU 29 RADARE AMR TEL AN ERA Dv 
用 设计 师 和 开发 者 应 该 假 设 用 户 自 己 就 能 搞 明白 。 
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移动 战略 分 析 师 Michael Mace 在 VentureBeat.com 网 站 上 发 表 了 一 
篇 X 章 (http://venturebeat.com/2013/09/21/90-of-mobile-apps-have- 
inadequate-help/)， 指 出 不 应 该 做 出 如 此 随意 的 应 用 着 陆 设 计 方 案 。 
他 说 道 :“ 移 动 应 用 开发 者 应 该 假设 用 户 会 遇 到 困难 ， 并 为 他 们 设 
计 一 条 能 够 安然 摆脱 困境 的 路 径 。 我 们 一 次 又 一 次 看 到 用 户 努 力 
想 弄 明白 应 该 如 何 操 作 。 即 使 是 面 对 移动 应 用 的 线性 功能 ， 这 样 
的 情况 也 时 有 发 生 。 


当然 ， 你 了 解 你 的 应 用 ， 但 那 征 因为 你 已 经 化 咒 了 好 儿 周 来 设计 、 
开发 这 个 应 用 。 不 要 以 为 对 于 用 户 来 说 ， 它 们 也 是 同样 地 直观 。 
我 们 在 此 讨论 的 帮助 模式 可 以 让 你 的 用 户 正常 使 用 应 用 ， 或 者 至 
少 能 让 他 们 摆 腊 困境 : 


* 入 门 介绍 

。 用 户 指南 / 帮助 系统 
。 前 见 问题 解答 

。 功能 使 用 辣 导 

。 新 手 5| 导 

。 上 下 文中 的 帮助 

。 收集 反馈 


单一 的 帮助 模式 可 能 不 够 用 。 许 多 成 功 的 应 用 都 结合 使 用 了 视觉 
吸引 和 帮助 模式 来 帮助 用 户 发 现 功 能 ， 最 大 限度 地 利用 好 工具 。 
举例 来 说 ，Waze 提供 了 一 个 欢迎 癌 导 、 一 个 视频 入 门 ， 以 及 一 个 
交互 式 “ 问 个 辣 题 ” 的 前 见 问 题解 答 。 


10-1 
iOS 版 Waze 结合 多 种 模式 提供 
应 用 内 帮助 


La MAE ] 

EREZA ARABIA 
容 。 如 果 要 重 定向 到 一 个 
网 站 ， 就 要 确保 内 容 为 移 
动 端 做 过 优化 。 
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Ask a question 


Please type your question here 
Watch the guided tour a 


We're here to help. 


Ask a question using the search bar 
above. 


How to edit the map 


Ask a question If you don't get the answer you were 
looking for, try using more words to 

describe your issue, or rephrasing the 
question. 


D 
D 
e 


Send logs 


15 


powered by nanoRep 


The pink line 


只 要 有 可 能 ， 就 应 该 把 帮助 内 容 直 接 舱 入 到 应 用 中 ， 而 不 古 重 定 
器 到 外 部 网 站 。 如 末 你 必须 重 定向 到 一 个 外 部 站 上 后， 那 束 要 确 
保 其 内 容 为 移动 设备 做 过 优化 ， 比 如 谷歌 地 图 和 SnipSnap 应 用 。 


Kindle 和 Runtastic's Six Pack 应 用 就 没 能 正确 做 到 这 一 点 ， 其 至 给 
用 户 造 成 了 更 多 困扰 。 


图 10-2 
安 音 版 谷歌 地 图 在 浏览 器 中 打开 
& Traffic 帮助 


-— Public transit Google 图 


© Satelite Google Maps for 
e Google Earth Android 


a ae ee MM 


do Bicycling 


Download the new Google Maps app for your Android 
device and start exploring the world around you. 
Features of the app include*: 


Settings 


Help a 
My Location 


See your location on the map. 


Send feedback 


Browse local places 
Search for any business or category of interest. 


Tips and Tricks 要 
Navigation (Beta) 


Google Maps for mobile Navigation is a turn-by-turn 
navigation system with voice guidance. 


图 10-3 
安 单 版 SnipSnap 在 浏览 器 中 打 
开 一 个 引导 视频 


© Settings Seukema  m.youtube.com/watch?feature=player_ C 
Sound Effects | ON | 


Change Password 


Change Email 


FRIENDS 


Recommended Users 
How to Use the SnipSnap Coupon App 


5 d By SnipSnapApp 
Find Friends 38,406 views © 


Share this app Suggested Videos 


Jaime "Jail'Me" Kirlew 
Committing Coupon Fraud 


muchlovefromky 
17,333 views 


HELP & FEEDBACK 


How SnipSnap Works 
How to get Tons of Coupons - 
Part 1 


| LemonConnection 
92,513 views 


Redeeming Your Coupons 


` How to coupon at Walmart and 
Price Matching 

Fun2BFrugal 

26,732 views 


View Tutorial 


Frequently Asked Questions 


Woman almost arrested for 
havina WalMart counon policv!!!! 


帮助 | 269 


图 10-4 
安 卓 版 Kindle 打开 了 来 面 版 风 | Be 
页 ， 而 不 是 移动 优化 过 的 网 页 版 


本 Home 
Help & Customer Service 
All Items A iti 
On Device 
Books u 
Docs etes 


Newsstand 


Kindle Store 


Settings a le ea an 
Info 
Send Feedback teh) auo ES AI 


Synchronized 


Help 


图 10-5 
. -- : 、 T-Mobile + 8:58 PM -Mobile 会 `+ 8:58 PM $ C+ 
iOS J& Runtastic’s Six Pack 应 用 | x j e : ^" — z 
= j elp.runtastic.com 
打开 了 桌面 版 网 页 ， 而 不 是 移动 Settings 
、 P 4 a = 
优化 过 的 网 页 版 本 Training plan Level1, Day1 > Weocc ETS 
E 
$ Select your Trainer Angie » Current Topics 
2 Voice Coach E ng | is h M a le > Issue: rc PN ae via Garmin Plugin 
Bluetooth Smart Combo Monitor compatibility for Android 
Welcome . -— resin 
@ Get the FULL VERSION > nos 
sa More Runtastic apps > Android 
CJ UseAirplay with your Apple TV > eee 


Runtastic.com 


Runtastic Hardware 


X? Restore In App Purchases 
* Rateus 


© Support / Feedback 
Six Pack Version 1.0.2 < 由 LE] L1 


270 | #102 


入 门 介 绍 

入 门 介绍 是 和 俐 单 精炼 的 说 明 ， 解 释 这 个 应 用 是 怎样 运作 的 。 入 门 
介绍 可 以 是 一 个 单 页 ， 比 如 Gyft 和 Cash 应 用 ， 也 可 以 是 一 个 视 
HER, FEAN Bump; 还 可 以 是 更 复杂 的 帮助 系统 的 一 部 分 ， 就 像 
Pocket 中 设计 的 那样 。 


[小 贴 士 ] 
入 门 介绍 模式 非常 适合 解 
释 一 步 一 步 的 工作 流 。 入 
门 介绍 的 描述 要 言 简 意 凡 。 


9:01 PM 


guft How Gyft works 


UPLOAD \ 
Solange Sending Cash 


physical gift cards securely 
in your mobile Gyft wallet. 


SEND & 
RECEIVE 

Buy and send gift cards to 
friends via Facebook, email 

or text, or regift any card EA 


from your Gyft wallet, 


REDEEM 


Simply flash your phone 
at the cashier in-store. 
(Some retailers support 
online redemption.) 


Continue 


10-6 

安 卓 版 Gyft #1 iOS Jk Cash: 简 
单 的 入 门 介绍 页 0s iOS 版 
Bump: 入 门 介 绍 视频 
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图 1 0-7 @0000 T-Mobile = 8:33 PM $C eoooo T-Mobile > 8:36 PM $ C — eoooo T-Mobile F 8:38 PM 


iOS }K Pocket: 入 门 介绍 结合 了 EE den a 
截 R ^ 插 图 、 文 字 和 视 频 GET STARTED Save Via Email 


Welcome Tour Add any page from Email ltems to Pocket 
Safari or your favorite 
app to Pocket. 


How To Save Simply email the link to 


add@getpocket.com 
HOW TO 


Getting Around 


From Your Computer 


Roading ih Foot Add any page from Safari or your 
Extensions and ^ favorite app to Pocket. Simply email 
Send to Friend bookmarklets make it ) the link to add@getpocket.com 
super simple to save x: A 
from any computer. We'll 


Tag, Favorite and Archive send instructions to get 
you set up. 


Use Pocket Offline 


TALK TO A HUMAN . 
From Your Clipboard 


Search Online Support 
If you have a URL 


我 在 第 7 草 里 提供 了 一 些 提示 ， 千 诉 你 怎样 做 能 使 你 的 应 用 更 能 
吸引 用 户 。 


用 户 指南 /帮助 系统 


用 户 指 南 一 般 比 人 简单 的 入 门 介绍 层次 更 深 。Pages 和 Facebook 在 
应 用 中 内 置 了 大 量 的 多 层级 用 户 指 南 。 


图 10-8 e@0000 T-Mobile + 8:16 PM $C  eeooo T-Mobile = 8:16 PM » > 


10S 版 Pages: 多 层级 用 p 指南 Tools Done —— @ Done 


四 Share and Print Get started in Pages 

Q Find Edit text 

2" Change Tracking Format documents 

会 Ruler Add images, shapes, and media 
Document Setup Add tables and charts 

nM Settings Use writing and editing tools 
A Set Password Share and print documents 

全 Help Manage documents 


Change Language 


Copyright © 2013 Apple Inc. All rights reserved. 
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ao 
0000 T-Mobile = 8:16 PM $ C>  eoooo T-Mobile = 8:16 PM » c 图 10-8 ( 续 ) 


—— ‘a ees . — ` V 
= Q Done :一 Q Done iOS 版 Pages: 多 层级 用 户 指南 
Get started in Pages A d d t ext 
Edit text bá If you’re using a blank template, just start 
typing to add text to the body of your 
Add text document. If you’re using a template with 


placeholder text, first select the placeholder 
text; whatever you type replaces it. As you 
enter text, new pages are added automatically 
to accommodate it. 


Change text appearance 


Use paragraph styles 
If you want to place text apart from your 


document's main body text, add a text box or 


Bulleted or numbered lists a shape, then enter text in it. 


Link text in a document Enter text in a new text box ue 


Format Chinese, Japanese, or Korean text 1. Tap +, then tap T. 


2. Tap one of the predesigned text styles 
Use bidirectional text (you can change how the text looks later). 


3. Double-tap the placeholder text, then 
Format documents enter your own. 


4. Drag the text box where you want it on 
Add images, shapes, and media the page. 


If you can't move the box, tap outside the 


z4 
eeooo T-Mobile + 5:57 PM " e0000 T-Mobile > 5:57 PM 1 0-9 
. : 4, 一 4 $ ZA 
Help Center < What names are allowed on... 10S hk Facebook: 多 层级 用 F 指 南 
Help Center Q 4. Name Q 
Top Questions What names are allowed on 
Facebook? 


What names are allowed on Facebook? 
Personal Accounts 


How do | reset my password? Facebook is a community where people use 
their real identities. We require everyone to 
How do | add or change my profile picture? provide their real names, so you always know 
who you're connecting with. This helps keep 
Who should | send friend requests to? our community safe. 


: . Names can't include: 
What is Code Generator? How does it work? 


= Symbols, numbers, unusual capitalization, 


Browse Topics repeating characters or punctuation 

= Characters from multiple languages 

Join Facebook > 
= Titles of any kind (ex: professional, 

. religious, etc) 

Login & Password > 

= Words, phrases, or nicknames in place of 
iddl 
Chat & Messages > URE 


LAME J 
Moh. wikia 
AP ~ 并 提供 内 容 搜 
RA 


19 p eO E) AO gm CO = 


News F Feed Requests Messages Notifications More News Feed Requests Messages Notifications More 


与 Facebook 2&[L], Flava 应 用 也 提供 了 组 织 有 序 且 易于 导航 的 用 户 
指南 和 常见 问题 解答 。 
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图 10-10 
iOS fk Flava 包括 了 用 户 指南 和 
常见 问题 解答 
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T-Mobile + 


Settings 


— e x 


Social Network 


Connected accounts 


Informations 
Notice 
FAQs 
User Guide 


Terms of Use 


Visit our Website 


Tell a Friend 


Flava 2.3.2 (4300) 


T-Mobile + 8:39 PM 


Back FAQs 


Can | back up my Flava data? 


Want to learn more about Flava's 
storage space (Cloud) 


How can | increase my cloud space? 


How can I use weather, look, theme 


icon tags? 


What is the Slideshow on the top of 


timeline page? 


What is Replay feature? 


I want to use Flava on other device 


such as desk PC and laptop. 


How can | view it by month/year? 


Can | search saved page? 


Can | change language of Flava App? 


> H H 
Camatimac eaarchina far mma 


T-Mobile + 9:43 AM 
Back User Guide 
Writing 


Create new page on 
desired timeline 


You can create new page on the 
desired location by moving ‘Plus’ 
button through the timeline. 


Uploading multiple 
photos at once 


You can register multiple photos at 
once and even editing it possible. 


Make an icon tag 


You can set the icon tag. 
Set your various daily life with theme 
icon tag. 


eÓ 0 
Make a text tag 


Mon You can insert desired text tag. 
And search it easily with Search 
Switz function. 


Q Erpe 


Sharing 


T-Mobile > 


Back FAQs 


How can I use weather, look, theme 
icon tags? 


What is the Slideshow on the top of 
timeline page? 


What is Replay feature? 


Use landscape mode for iPhone and execute 
Replay feature on extension menu for Android 
phone for Slideshow with fascinated music. 
Organize by icon tags, text tags, or by 
month/year on the timeline, then you can 
replay by tags or entire timeline. 

Sounds provided by the best studio, 
‘Supasounds’, or songs on your library will be 
played randomly. Better replay feature will be 
offered to you through upcoming updates. 
Want to enjoy your past memories with your 
beloved one or by yourself? Do ‘Replay’. 
Flava can help you out anytime, anywhere! 


I want to use Flava on other device 
such as desk PC and laptop. 


How can I view it by month/year? 


i$ D [n] aes 

如 果 你 想 告诉 用 户 的 信息 用 一 个 入 门 介绍 不 足以 表达 ， 又 不 够 一 

部 元 整 的 用 户 指南 ， 怎 么 办 ?编写 一 个 常见 问题 解答 列表 可 能 就 
能 解决 回 题 。 和 常见 问题 解答 通常 把 最 常见 的 问题 排 在 前 面 。( 顺 

BET.) 这 些 问题 可 以 通过 对 应 用 的 预览 版 进行 用 户 测 试 来 确 

Æo) Dropbox 使 用 了 标准 的 i0S 模式 ， 逐 级 深入 到 每 个 常见 问题 

解答 中 去 。 


[小 贴 士 ] 

常见 问题 解答 列表 应 当 设 
计 得 易于 浏览 ， 应 确保 可 
简明 直观 地 显示 答案 。 把 
最 常见 的 问题 排列 在 前 面 。 


Mobile ~ 10:19 PM T-Mobile = 2. 10:19 PM 
Help € Viewable Files 
What kinds of files can | view? 
What files can | view? ? 
All files supported by your iPhone will preview 
How do 1 share files? > in the Dropbox app automatically. The 
Dropbox app also allows you to open files 
How do | view files offline? > using other apps that support the file type. 
How do | play videos? > B Export a file to another app 
How do | upload files? > 1. Select the Dropbox tab (the Dropbox 
icon) at the bottom of the screen. 
Why do you need location data? > 2. Tap the file you'd like to export to 
another app. 
How do I set a passcode? > 
3. Tap the icon that shows a downward 
How much can store? > arrow entering a box at the bottom of 
the screen. 
How do | delete files? > wil Verizon LTE 8:00 PM 
€ Getting Started.pdf 
How do I use Camera Upload? > em an eta d hom hog tw ake your Ores fe tf om 
eremum mm en 图 10-11 
iOS 版 Dropbox: 2 ZR YR A BN E 
见 问 题解 答 


Audible 在 显示 常见 问题 解答 的 答案 时 使 用 了 行内 展开 的 模式 代替 
逐 级 深入 。 
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图 10-12 
iOS 版 Audible: 常见 问题 解答 
在 页 面 上 展开 


T-Mobile 有 5:59 PM ] eec T-Mobile + 5:59 PM 


X iPhone FAQ X iPhone FAQ 


Frequently Asked Questions for Audible Frequently Asked Questions for Audible 
for iPhone for iPhone 
How to | refresh my library? v How to I refresh my library? p 


There are two ways to refresh your library. 
What happened to the Chapter forward 


and Chapter back buttons? il 1) In the library page drag the list of titles down the 

page to reveal the "Pull Down to Refresh" area. When 
How do | enter the Buttons-free player the text "Release to Refresh" is visible, releasing the 
mode? x scrolling area will trigger a library refresh. 


2) Within the application Options menu (Gear icon), 
you can tap the "Refresh Library" button to refresh 


After signing in, only the free Samples your library 


are being displayed in the Library; why 
are the books | have purchased - 
missing? 


What happened to the Chapter forward 


Why am | shown a "Sign in" screen and Chapter back buttons? 


when | attempt to play one of my v 
downloaded books? 


How do I enter the Buttons-free player 


; " Rus mode? 
If | uninstall the Audible application do 


| lose anything? v 


After signing in, only the free Samples 
= "HECUN are being displayed in the Library; why 


功能 使 用 向 导 
功能 癌 导 可 以 用 来 突出 一 个 应 用 的 某 些 特性 和 功能 。 不 要 把 功能 
器 导 和 产品 同 导 混淆 ， 产 品 同 导 突 出 的 是 应 用 本 里 的 价值 点 ， 比 
如 下 面 的 PayPal 示例 。 


图 10-13 | ser 

ZR faye 产品 向导 传达 应 Get Excl Off Pay Friends B PayPal A d 
et Exciusive ers a riends Back ayPal Accepted at 
用 本 身 的 价值 点 ^ an Instant Metchents Near You 


= 
Link your favorite bank accounts, debit 
" zie pos nes Mu pay with Pay a friend back for lunch. Chip in Take PayPal with you to local stores, 
aes ue sisi o m one for a gift. Collect money for a team restaurants, and more. Use the app 
POAT Tee barbeque. PayPal lets you transfer to pay with your phone. 


money between friends instantly. 


a å DD BRL DD 
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功能 问 导 通常 在 初次 使 用 时 显示 ， 但 之 后 也 可 以 访问 。 在 Fidelity 
中 ， 可 以 通过 “ 回 看 说 明 指 南 ”(Bring Back Instructional Guides) 
设置 开启 同 导 。 


图 10-14 
dt x JR Evernote: 功能 向 导 突 出 
特定 的 功能 和 UI 控件 


AItch Tap a list option to create bulleted, 


numbered or checklists for things like 


Record audio groceries, tasks or preparing to travel. 


lari 


Tap on the microphone to record meetings, 
lectures, even your child's first words. 


Evernote make them all easy to find, any 
time. 


T-Mobile 去 10:21 PM 


T-Mobile 到 10:22 PM p 图 1 0-1 5 


Tap to edit your cards 10S hk Fidelity: = 
“ 回 看 说 明 指南 ” 


Close Settings 


TA 
iu 
at 
Am 
[st 
H 


Quotes & News Updates 
V Off 
Auto-Update 


Quote and News Data will update only when 
refreshed manually. 


Swipe to 
view more 
cards 


Log In Settings 


30-Day Access 


Access Watch List and Real-Time Quotes for 30 
days after your last logged in session. 


Watch List & Positions 


Show What's New 


Bring Back Instructional Guides 
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图 1 0-1 6 eoooo T-Mobile 3 7:25 PM 
iOS 版 Zite: TU RH “BS” x 
菜单 中 的 选项 重启 向 导 


More 


GENERAL 


About Zite 


Zite recommends stories 
based on your interests and 
reading habits. The more you 
use it, the smarter it gets. 


Send Feedback 


HELP 


Tutorial 


FAQ 


Swipe to learn more 4——- 


=F: 


虽然 功能 向 导 看 上 去 挺 漂亮 ， 但 用 户 测 试 表 明 ， 即 便 这 些 向 导 设 
计 得 很 好 ， 用 户 也 会 经 常 跳 过 去 不 看 。 当 用 户 想 直接 进入 应 用 时 ， 
它们 还 挺 碍 事 ， 令 人 恼火 。 

最 好 的 帮助 设计 依 应 用 和 受众 的 不 同 而 不 同 ， 所 以 一 定 要 测试 多 
种 帮助 模式 。 可 以 回顾 第 7 草 中 讲 到 的 准则 来 避免 无 效 的 引导 
设计 。 


[小 贴 士 ] 

推出 功能 向 导 可 能 会 对 应 
用 的 转化 雍和 使 用 量 产生 
负面 影响 。 可 以 查看 第 7 
章 中 讲 到 的 交互 式 引 导 设 
Tp RAE RK. 


Swipe Right to Archive Great Job! 


Archive lives to the right of Mailbox. 


: You can quickly access your archive 
Try archiving the message below. q y y 


from the navigation bar and in the 
"All Mail" folder in Gmail 


New Mail Next 


BORE 


图 10-17 
iOS 版 Mailbox 没有 使 用 功能 向 
时 ， 而 是 设计 了 一 个 交互 式 引 司 
( http://www.youtube.com/watch? Get Started 
v=URd0j5vEsHE ) 
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图 10-18 

te AX tL, SK Boomerang 中 
的 功能 向 导 真 是 铺天盖地 、 势 不 
Hy 


Welcome to 


/ 
/ / ? 
,~ Boomerang for Android. swiping befi: 
Let's show you how it works. Swipe to the left to reveal more actions! 
d P le Soon oo P o 216990090000 gg" io wosoo:s:o 
t — 一 一 一 A mm 


© Getting Started! 


‘oomenang? What's that?" Send laten? h this for neal? Get reminded about Select messages in bulk! 
Boomeranging a message will L Yes! Write an email now, and we'll the emails you send. Press and hold a message to activate 
bring it back to your Inbox when send it for you later, even if you turn Vou cal Meo tobe multi-select. After that, you can select 
need it in the future. off your phone or lose signal. onlyif Mo den e sogna — led more just by tapping. 
g” 2,0000e€90000 gp" 228008000 "Lh J 90 0000,000 E” ^ 7.999000 |oeo 
人 一 一 A M A n A 


新 手 引 导 


ee 会 让 用 户 感 ee Magpie O8, 

一 点 我 们 在 第 7 章 中 讨论 过 。 虽 然 功 能 向 导 和 新 手 引 导 在 某 些 
gt, 但 一 者 的 区 别 在 于 ， 新 手 引导 其 实 是 使 用 户 边 使 用 应 
用 边 学 这 种 模式 非常 适合 需要 彻 始 配 置 的 应 用 ， 或 者 依赖 多 
he ， 比 如 Pocket 和 Vine, 


eecoo T-Mobile € — 8:33PM RES "AU Downloading 1 / 4 Downtoading Complete 图 10-1 9 
iOS 版 Pocket: 新 手 引 导 


Welcome to Pocket Email ltems to Pocket Save From Your Computer 
p> 
| 
H AER 
I. a! | 
First things first, we need to get a Add any page from Safari or your Our extensions and bookmarklets 
few things set up so you can start favorite app to Pocket. Simply email make it simple to save with one click 
saving items to your list. the link to add@getpocket.com from any computer. We'll send you 


instructions on how to get set up. 


Next Previous Next Previous Next 
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图 10-20 E TIE EPA 
iOS 版 Vine: 一 般 模 式 的 新 手 
2| X (http://www.youtube.com/ 
watch?v-vBOC9DpC5ns ) 


New to Vine? 


We can walk you through how 
to make your first post. 


OK 
Vine records only when your finger is 
on the screen. Press and release at 
different times to assemble videos like 
this one. 


Skip the tutorial. 


在 Noom 和 Everest 这 类 基于 目标 的 或 行为 修正 的 应 用 中 ， 新 手 引 
导 既 用 作 着 陆 页 也 用 来 留 住 用 户 。 
图 10-21 


Z xk Noom: 一 个 值得 注意 的 
新 手 引 导 


Keep enjoying real 国 Set up your weight loss plan 
food, not diet food Choose program 
intensity 
This will affect how hard your diet and 
Greate-your-profile exercise tasks get, and how quickly you'll 


lose weight as a result. 


Get moving with Easy «^ 
activities you enjoy 


AS 


Lose weight with 
coaching that works. 
No more room on this page 


our Calorie Budget 


The Key to Weight Loss 


=) Your calorie budget You don't have to do grueling workouts to Ez Your-calorie-budget 
lose weight. When it comes to weight 
loss, food is the real key. 


Setup your-weight-loss plan et up-your weight loss plan 


Greate-your prote 


c B 
e— 
E 
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图 10-22 
iOS JK Everest: 带 有 互动 提示 的 
新 手 引 导 


Fecooo T-Mobile ? 9:03 PM soo," f Loading... 


Welcome! Let's start by Y à o 
creating your first Everest Type a goal you want to make daily 


progress on in the next month 


l'eoooo T-Mobile = ^ 9:02PM yor 


Daily voga Congrats! 
y yog You started your first Everest 


Visible to others Visible to others 
T r t eo t 


QIWIEIRITIYI[UIJ!TOJP| IOIWIEIRITIY[UI I JOJP 


A[SIDIFIGIHIJ|[KIL AISIDIFIGIHIJIKIL 
ZXICIVIBINIMIES pe ZIXICIVIBINIM Q9 Let the journey begin! 


2123 space Lr 2123 space | Done | 


@0000 T-Mobile © 9:03 PM $ C #0000 T-Mobile © 9:03 PM b C» Fe0000 T-Mobile @ 9:04 PM 


o 000 


Your goal is to take 1 step a day 
towards your Everest — even the 
smallest steps count 


« Back Dream 


E 


We'll notify your dream team if it 
looks like you need a little nudge 


4X See what others are doing 


This dream's journey so far; 
) Steps * 0 Moments: 1 1 


o 


NC Nice! You started a dream 


上 下 文 帮助 

上 下 文 帮 助 是 指 在 应 用 的 特定 位 置 获得 的 帮助 。 不 同 于 功能 向 导 
的 是 ， 上 下 文 帮助 没有 前 车 引 导 信 息 ， 这 种 帮助 可 在 页 面 内 访问 ， 
或 在 执行 一 项 任务 的 过 程 中 显示 。 


在 Argus 中 ， 点 击 水 镁 会 显示 增加 水 量 或 减少 水 量 的 提示 。 
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图 10-23 
Windows Phone 版 谷歌 应 用 :， 用 
户 可 以 点 击 特定 的 按钮 ， 显 示 上 


TO BI 


x | ()-7 


iOS 版 Argus: oi GB A E 
a E T X E Chttp://youtu.be/ 
FxvqBhs-2Co ) 
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Saving to Screenshots... 
J 


Filter your search results by type. 


No Service + 


< 


10:02 PM 
GLASS OF WATER 


Just now 


L) Comments 


(^ Share 


No Service + 10:02 PM 


《 GLASS OF WATER 


Just now 


Drag down to remove water 


L) Comments [% Share 


图 10-25 
Search Flights | Search | iOS Jk Expedia 和 Windows 
—n: Phone } Creative Studio 在 任务 


7A AUS-Austin-Berg...M N SFO-San Francis.. 流程 中 提供 帮助 
E Nov 28 to Nov 30 


e0000 T-Mobile ~ 10:19 AM 


November 2013 


Nov 28 - Nov 30 
Drag end dates to modify 


收集 反馈 


P 错误 、 反 局、 建议 、 增 加 新 功能 的 需求 一 一 幸运 的 话 ， 
尔 的 用 户 会 愿意 与 你 分 享 这 一 切 。 一 定 要 为 用 户 提 供 一 个 简单 的 
机 制 来 收集 他 们 的 反馈 。 


大 多 数 应 用 在 “设置 ”下 都 会 有 一 个 “ 反 包 ”选项 ， 氮 击 该 选项 
会 打开 移动 设备 的 邮件 客户 端 ， 或 基于 网 页 的 邮件 表单 。 理 想 情 
况 下 ， 网 页 表单 应 该 答 入 到 应 用 站， 而 不 征 局 动 移动 训 览 右 。 
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图 10-26 
iOS 版 谷歌 应 用 : RN 
馈 表 单 


T-Mobile + 10:23 PM 


T-Mobile 4 10:56 PM 


Cancel 


Feedback 


Help 


Privacy Policy 


Tak r 
ake a tou Privacy Policy 


Send feedback 


Take our survey 


bei mo" 
Preview Send 


0 EEO 


^ Ms Spa eee 法 Support & FAQs = Support & FAQs 
馈 表 单 (由 Zendesk 提供 ) i B8 a 


Silvercar Customer Support Silvercar Customer Support 


Contacting Silvercar > 
2. ; Subject * 
Pricing, Payment and Receipts > J 
Silvercar Basics > 
Description * 
Reserving a Silvercar > Please enter the details of your request. A 


member of our support staff will respond as 
soon as possible. 


Curbside Pickup Locations > 


Pickup, Drive & Return - DFW > 


Submit a request My requests Your email address * 
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Wunderlist 整合 了 流行 的 网 页 器 工具 UserVoice， 创 建 了 一 个 互动 


社区 ， 用 户 可 以 在 里 面 提 建 议 ， 还 可 以 对 新 功 


能 需求 进行 投票 。 


Get Satisfaction 是 另 一 个 基于 网 页 的 用 户 反 馈 工 具 ， 可 以 集成 到 原 


生 应 用 中 。 


Settings Support 


Support 


Support Forum 


Request a Feature 


Translate Wunderlist 


#0000 T-Mobile + 8:52 PM % COs 


wunderlist.uservoice.com © 


Wunderlist Feature 
Requests 


Hey there! 


We're always looking for ways to make your 
Wunderlist experience better and here you 
can tell us how. All you need to do is enter 
your suggestion. 

If it's already been submitted, give it your 
vote! If it hasn't yet been submitted, you can 
post it as a new idea. 


What would make Wunderlist 
better? 


< E XI tal 


e0000 T-Mobile = 8:52 PM $E 


图 10-28 
iOS 版 Wunderist: 用 集成 了 


wunderlist.uservoice.com 


What would make Wunderlist 


better? UserVoice 的 收集 反馈 方式 创建 


Enter your Suggestion here 、 
| your sugg at 


Status 


2,146 


aa 


My feedback ™ 


Recurring Tasks Based 
on Completion! 


Tasks need to have the option to 
repeat based on the completion date 
not only the assigned calendar due 
date. For example, oil change. It says 
it was due May 1st. | didn't get to it 
until May 23rd. So then the task 
would repeat at the given interval 
based on May 23rd, not the original 
due date. The lack of this is a deal 
breaker for me and | will continue to 
shop for an app that supports it. 


46 comments - Flag idea as 
inappropriate 


[小 贴 士 ] 

如 果 你 要 求 用 户 提供 反馈 ， 
就 要 做 好 接 这 的 准备 。 提 
BY BAF FF RR), VAR IAP 
的 问题 和 功能 需求 做 出 优 
先 排序 和 回应 。 
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。 及 模式 


标新立异 (Novel Notions), 


隐喻 错位 (Metaphor Mismatch), 、 思 蠢 的 对 话 框 (Idiot Boxes), 
垃圾 (Chart Junk) 、 按 钮 海 (Oceans of Buttons) 、 格 格 不 入 (Square 
Peg，Round Hole ) 


什么 是 反 模 式 ? 维基 百科 的 定义 为 : 


286 


Sey 陷阱 (pitfall )， 指 一 类 通常 是 重复 发 明 的 糟糕 的 

题解 决 方案 。 反 模式 已 被 当 作 一 个 研究 类 RA, 以 便 日 后 加 以 
ony 并 在 调查 系统 故障 时 加 以 辨别 。 这 一 术语 源 自 计算 机 
科学 ， 很 明显 ， 很 明显 其 灵感 来 自 四 人 组 ( Gang of Four) 的 
4 设计 模式 》( Design Patterns) 一 书 ， 此 书 介 绍 了 一 些 高 质量 
的 编程 方法 。 


不 必 的 复杂 (Needless Complexity), 


图 表 


Sit Ryle RW, LAR zB Bh ER bo TE $6.17) 68 
见 设计 陷阱 。 由 于 每 个 重新 发 明 都 有 甚 各 目 创 新 方面 的 毛病 ， 我 
不 能 一 概 而 论 ， 所 以 现在 就 让 我 们 直 奔 主题 吧 。 


标新立异 

新 手 设 计 师 总 想 尝 试 前 卫 的 、 原 创 性 和 革新 性 的 设计 。 但 大 部 分 
情况 是 ， 设 计 出 来 的 效果 很 差 ， 让 人 难以 理解 ， 更 难 上 和 手 使 用 。 
有 了 时候， 造成 反 模式 的 原因 是 懒惰 或 坏 习 惯 。 按 照 可 用 性 挑刺 专 
业 户 Richard Gunther 的 说 法 就 是 :“ 你 通常 能 够 判断 一 个 移动 应 
AF AA cE GEA MAAR x. EAD A AE 
上 日 有 的 交互 模型 转换 到 新 平台 上 ， 并 且 设 计 出 一 些 非 标准 的 UI 元 
R, eMe B GE 。 


标新立异 在 移动 应 用 中 随处 可 见 ， 大 到 主导 航 ， 小 到 一 个 单独 的 
控件 、 交 互 或 手势 。NBC News 以 其 筷 八 开 屏 般 的 转盘 末 单 在 我 的 
标新立异 却 榜 单 中 位 列 榜首 。 谢 天 谢 地 ， 大 多 数 应 用 都 没有 试图 
创造 一 个 与 自己 的 商标 形状 一 样 的 来 单 。 


图 11-1 
atl Verizon > ella " => ml. Verizon > 6:14 PM (m ) m. Verizon > 6:14 PM E Cm iOS 版 NBC News: yi JN 司 商 标 
TAN a AVE menu 3 di NBC NEWS Close SB NBC NEWS Close NE N 
Weather News videos | 为 灵感 的 = 航 


» c m—— Topics Shows Topics 
人 piles up the 
2 tumbleweeds ! A g 
A nt; ~ = Ó : H Q 
4 P, ` " IVA 
% 2 = of ES © 


P atterr 


4 snow fro Mouri to... 
4:01 AM CT, Wed, February 27, 2013 


XE 


24-24 Deadly storm dumps 
4| snow in North, heavy... 
| 4:16 AM CT, Tue, February 26, 2013 


a. T 
AA -| 2 dead as wind-whipped 
a3 winter storm pounds... 

a| 3:39 AM CT, Mon, February 25, 2013 


El: 指 《 设 计 模 式 》 一 书 的 四 位 作者 Erich Gamma, Richard Helm, Ralph 
Johnson 和 John Vlissides, ( 译 者 注 ) 
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图 11-2 


安 卓 版 USA Today: 菜单 中 明智 
的 色彩 运用 
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那么 为 何 它 就 是 反 模式 呢 ?” 让 我 们 款 一 道 来 : 

。 不 管 是 对 普遍 的 移动 平台 来 说 ， 还 是 对 于 iOS 平台 ， 它 的 来 单 
位 置 都 不 标准 。 比 如 ， 作 为 下 拉 荣 单 的 导航 图 标 应 该 放 在 导航 
栏 的 一 角 ， 而 不 应 该 放 在 中 间 。 

。 旋转 的 文字 让 人 难以 阅读 。 一 个 简单 的 左 对 齐 分 类 列表 读 起 来 
会 更 省 时 间 。 

。 颜色 太 多 了 ! 过 度 质 充 的 色 板 让 人 迷惑 ， 同 时 也 降低 了 沫 单 选 
项 的 多 读 性 。 

。 这 个 设计 在 导航 的 基础 功能 方面 就 失败 了 ， 导 航 的 基本 功能 就 
是 要 让 用 户 看 到 自己 当前 在 哪儿 以 及 能 去 哪里 。 一 旦 关闭 这 个 
菜单 ， 无 论 古 选中 的 话题 标题 还 是 所 目标 题 都 不 再 显示 在 页 面 
Es 


USA Today 的 设计 就 没有 NBC News 那么 花哨 ， 却 易 用 得 多 。 
USA Today 设计 了 一 个 彩色 且 实 用 的 侧 边 抽 懂 模式 导航 系统 。 每 
个 类 别 的 新 闻 都 用 不 同 颜色 表示 ， 但 不 是 一 次 都 显示 出 来 ， 这 样 
就 避免 了 孔 汰 开 屏 似 的 效果 。 


NEWS NEWS 


Day in 
za) Vay 
Pictures 


SPORTS SPORTS 


w Weather 


LIFE LIFE 


MONEY MONEY 
TECH TECH 
TRAVEL TRAVEL 


OPINION 


OPINION 


RRE FAAS ET AEE, Eh Sy 
以 从 页 面 项 部 下 拉 的 抽 层 。 我 最 后 才 意 识 到 ， 这 应 该 是 模仿 飞机 
上 窗户 的 遮光 帘 ! 这 是 一 个 过 度 拟 物 设 计 〈 即 对 现实 事物 的 隐喻 ) 
的 很 好 的 例子 。 这 样 的 设计 对 用 户 有 帮助 吗 ? 没有 ， 它 仅仅 是 为 
了 讨 人 喜欢 才 这 么 设计 的 。 


BOOK AFLIGHT 
fadar Whines 


Carrier Alaska Airlines 


Operated By Alaska Airlines 
Sched. Dept. 4/25/13 11:35 AM 


Actual Dept. ETD 4/25/13 11:35 AM 
Sched. Arrival 4/25/13 5:25 PM 
Actual Arrival ETA 4/25/13 5:25PM f 


Meal Food for Purchase 


Plane Type Boeing 737-900 


Distance 1,768 miles 


em 


CONTACTUS 


Last Updated 4/20/13 1:05 PM 


然而 ， 遮 光 帘 式 菜单 并 不 是 这 个 应 用 唯一 的 标新立异 之 处 。 机 票 
搜索 结 末 以 浮动 的 卡片 形式 显示 出 来 。 通 过 卡片 下 方 的 深 动 条 可 
以 切换 卡片 一 一 如 末 你 看 得 见 的 话 。 拖 搜 手 柄 会 显示 每 一 项 的 更 
多 信息 ， 但 手柄 的 位 置 看 上 去 和 卡片 没有 任何 关系 。 


len TŘ ll LL...,L22,!,»/&R2£/ 


NL 


an~ 
—— — BE U^ 


Lm 


4/21/13 - 4/25/13 4/21/13 - 4/25/13 


DEPARTS THU 4/25/2013 


J Seattle, WA 


ARRIVES THU 4/25/2013 


想 要 获得 更 人 简单、 更 快捷 的 订 票 体验 ， 就 试 试 Expedia IE, 
Expedia 拥有 标准 的 导航 、 简 洁 的 搜索 表单 ， 以 及 创新 〈 且 易 用 ) 
的 查询 和 选择 机 票 设 计 。 


图 11-3 
oe BI ITI He OA 
菜单 设计 对 用 户 没有 帮助 


图 11-4 

安 卓 版 阿拉 斯 加 航空 : 另类 的 搜 
索 结 果 视 图 ; 用 底部 的 滚动 条 切 
换 卡 片 
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图 11-5 


安 版 Expedia: Aft, 秀 的 hit FE hit Inbound Flights to Austin SC cance. 


j 1 Traveler, Thursday, October 3, 2013 


段 和 航班 中 转 视 觉 化 设计 Delta "T 


Delta 1984 


Delta, UNITED $504 6:00AM O—Oo 


8:50 PM O—CO—O—O 10:43AM : 
E Moe. dap cns +1 day 2h 8m - Economy (U), Boeing 737-800. 


Delta $519 (9 3h 32m layover 


5:00 PM 8:08 PM 
ag Delta 2408 


12:40 PM 
American Airlines $544 


5:20 PM O—O 8:30 PM = 
JFK AUS 2h 22m - Economy (U) 


US Airways $560 


6:15AM O—O-O 11:12 AM 
JFK CLT AUS 


— Q — | BAGGAGE FEE INFORMATION 


Hipmunk 也 是 一 个 订购 机 票 的 创新 设计 示例 。 往 总， 创新 契 针 对 用 
户 体验 层 而 言 (把 “agony” 作 为 一 个 搜索 排序 选项 ) ， 而 不 是 在 
UI 控件 层面 (一 个 窗帘 式 末 单 丝 之 不 能 改善 我 的 订 票 或 旅行 体验 )。 


图 11-6 

ES sk Hipmunk: A i 的 控 f ar 有 woe gio 

来 创 新 的 体验 ( 按 FR agony HE ) Austin > San Francisco 3 
> Search Details Tue, Oct 1, 2013 


ARRIVE 6AM 11AM 4PM 9PM 


so —- 
saso 


CEG Business | First 
2 ES m 


IB Passenger - t 


A Enter departure x 


NI Enter destination 


| Select dates 


Q, Search | s 
$611 Depart 
(9 Recent Searches fe | 


iE 1: Agony 是 Hipmunk 的 一 个 智能 排序 ， 应 用 中 官方 解释 为 :“Agony 是 我 
们 独 有 的 机 票 排 序 ， 它 能 帮 你 找到 票 价 最 低 、 飞 行 时 长 最 短 且 中 转 航 班 
最 少 的 机 票 。” (PETE) 
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还 有 一 个 来 自 Twitter @music 的 反 模 式 例 子 。 设 计 师 们 把 几 种 导 
航模 式 结 合 起 米 ， 设 计 了 一 种 “创新 ”界面 。 在 这 句 话 中 ， 我 讽 
刺 性 地 用 到 “创新 ”一 词 ， 意思 是 他 们 花 了 更 多 的 时 间 和 金钱 却 
设计 出 一 种 降低 了 可 用 性 的 目 定 义 控件 。 


Play Full Tracks 
^'IPERSTARS UNEARTHED 


anti~ H chons " Wi La A 
| Patte - tw Sa SELLE 
Un Suggested a om TU "3L d 


EMERGING 


一 一 


#NowPlaying 


ALTERNATIVE HIP HOP m Me 


COUNTRY METAL 


DANCE POP 


ELECTRONIC RNB 


导航 栏 设计 有 一 个 和 目 定义 下 拉 有 芋 单 ， 页 脚 有 页 面 指示 器 (4 个 小 
El). LEAT ARE, PRR AUB ase FA RAY, E 
择 下 拉 莱 单 中 的 一 个 选项 将 会 翻 到 下 一 页 。 但 等 一 等 ， 还 不 只 如 
此 ! 辐 左 或 癌 右 请 动 还 会 更 新 下 拉 菜 单 ， 显 示 出 最 新 选中 的 模块 。 


et "wf th AR Ae YP ALS ATF as” 控件 
个 不 好 的 设计 ? WAR ENTE, BZ RT RR ATT ter Sat 

RUT po RT LEE, ERES RAS LEUR n. Vr it CE 

努力 掩盖 那个 控件 啊 ! 

Songza 和 Soundwave 是 音乐 类 应 用 中 真正 有 创新 设计 的 例子 。 

Songza 的 礼宾 部 (concierge) 隐喻 实在 绝妙 ”"， 而 Soundwave 让 你 

可 以 探索 结合 社交 元 素 和 地 理 位 置 元 素 的 音乐 地 图 ， 


{È 1: Songza 的 concierge 是 根据 不 同 的 时 段 、 活 动 等 ， 提 供 个 性 化 场景 音乐 的 
功能 。( 译 者 注 ) 


图 11-7 

iOS 版 Twitter @music: 安 S n 
AY TAR + WE = 
分 之 举 


[小 贴 士 ] 

如 果 你 想 在 你 的 应 用 中 做 
出 创新 ， 那 么 就 要 在 改进 整 
体 用 户 体验 的 概念 模型 和 
流程 上 下 功夫 ， 寻 找 帮 助 
用 户 的 机 会 。 在 设计 UI 之 
前 ， 先 要 理解 系统 设计 指 
南 ， 熟 悉 已 有 的 设计 模式 。 
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图 11-8 
版 Songza 和 Soundwave: 


Z 
没有 反 模 式 的 创新 


Music Map 


Draw a circle using the pencil tool 


e Concierge 4 


It's Sunday night. 
Play music for: 


$ 
© E 1e 
N^ m^ 
Brand New Unwinding Love & 
Music Romance 


- 
D Ba 
Looking at Breaking Bad 


Pictures of 
Your Ex 


2 . m \ C2013 A 
se 5 2:5. 4 O NN 
ZH — we 


JOIN THE HUNT 


不 必要 的 复杂 

很 好 的 用 户 体 验 和 很 差 的 用 户 体 验 之 间 的 区 别 之 一 在 于 效率 。 用 户 
体验 指导 Whitney Hess 说 :“ 效 率 涉及 提高 生产 力 和 减少 所 需 精 力 
两 个 方面 ， 一 个 流畅 的 设计 能 让 用 户 在 同样 的 单位 时 间 内 完成 更 多 
事情 。 创 造 效率 表明 你 非常 尊重 客户 ， 而 他 们 也 一 定 会 注意 到 你 的 


努力 。 
让 我 们 来 看 看 一 些 有 痢 不 必要 的 复杂 界面 的 应 用 ， 这 些 应 用 限制 
了 用 户 的 使 用 效率 。 


Eureka Offers 是 一 个 寻找 当地 和 全 国 优惠 活动 的 简单 应 用 。 用 户 
可 以 保存 他 们 喜欢 的 优惠 券 。Google Offers、Shopular、SnipSnap、 
RetailMeNot 以 及 其 他 大 多 数 这 类 应 用 全 部 用 简单 的 行内 操作 实现 
保存 、 存 储 纸 质 优惠 券 和 收藏 优惠 券 ， 而 Eureka Offers 与 它们 不 
同 ， 用 户 需 要 通过 长 按 然后 拖 放 的 交互 才能 实现 保存 操作 。 这 种 
设计 不 但 让 用 户 更 费力 ， 而 且 也 比 行内 操作 更 隐蔽 (WS SS), 
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= Recommended "~" 0: 
z ALL CATEGORIES a mJ = 
Lom Expires Mar ZU L— wm 


$ Get offer P23k 132 

ANN TAYLOR 
Castle Dental = ary 
85% off Cleaning Exam and 
Digital X-ray ($29 total) 
4.7 mi Expires Mar 9 
@ Saved wv Uo Ul 


ap Favorite A Nearby 


FEATURED FOLLOWING 
| Kristen M. snipped Save 20% @ Kohl's KOHLS 
1 second ago expect great things 


IN-STORE ONLINE 


* 


12,283 Snips Add to... Y Snipped! 


Extra 20% off in store purchase 


64% Success * Exp 


FS KAA HEM A. CAA BIER dag D T x 
Facebook 的 聊天 头像 。 为 何不 设计 成 “长 按 查 看 /隐藏 ”选项 ， 或 
者 衫 动 出 屏幕 来 删除 ， 又 或 者 至 少 不 在 页 面 上 显示 序 动 的 头像 ? 


5:05 PM 


News Feed 


[7 Status I$) Photo 9, Check In 


en lAmare 


Drag Down to Hide 
Pull Chat Heads down to the 
h 


> < Updating... | 


hide them 


Videos in News Feed eo 
mpi 60 all in 1 photo printer never been Now some videos will automatically pl. News 
open in all original packaging (bought and Feed. 
just never used) $30 (1st pic) 

Learn More 


HP Photosmart 8250 Color Printer used but 
good condition with so... Continue Reading 


(= News Feed 


$ Whitney Broadwell at Hartsfield 
MEI International Airport, Atlanta 


2 hours ago in Atlanta, GA Jt 


Merry Christmas ya'll! 


anti~ 


Woe ators B b 


Drag here to hide 


图 11-9 

Google Offers, Shopular, 
SnipSnap 和 RetailMeNot 4 3 Æ 
用 了 行内 操作 实现 保存 、 存 储 纸 
质 优 惠 券 和 收藏 优惠 券 


图 11-10 

iOS 版 Facebook: 聊天 头像 并 不 
直观 ， 而 且 从 视图 中 删除 头像 更 
麻烦 
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图 11-11 
安 卓 版 Eureka Offers 需要 长 按 并 
拖 放 才能 保存 


us 


NATIONAL LOCAL 


aty Perry 3.3oz EDP 
R atter pmen + Free... 


EN Silver American p 
=~) Eagle (Lot of 10) 

$276-67 $243.99 Johnson Matthey - JM 100 

Troy Oz .999 Fine Silver... 


Purr by Katy Perry 3.3oz EDP $2399.00 $2146.80 


Spray Women * Free... 
$65.00 $28.99 


| Johnson Matthey - JM 100 
Troy Oz .999 Fine Silver... 
$2399.00 $2146.80 


TE 2013 5 Troy Oz .999 Silver 
© Mt. Rushmore SD National... 
es 


2013 5 Troy Oz .999 Silver 
.. Mt. Rushmore SD National... 
j $149.00 $120.81 


2013 1 Troy Oz Gold Buffalo 
L_ssn NGC Ms7n -1nnth 

WE. 2013 1 oz Silver Americ: 
SN Eagle (Lot of 10) 
ILI) 627667 $243.99 


| $149.00 $120.81 


(E) 2013 1 Troy Oz Gold Buffalo 


Saved offers Vv 


iTranslate 应 用 的 设计 师 显 然 爱 上 了 基于 手势 的 创新 UI 设计 。 我 这 
么 说 是 因为 这 个 应 用 到 处 都 需要 你 使 用 非 直 观 的 手势 。 问 右 短 距 

骨 动 以 从 剪贴 牧 粘 贴 ， 辐 右 长 距离 请 动 以 使 用 语音 输入 ， 搞 什 
A? 


图 11-12 
iOS 版 iTranslate: UI 设计 充斥 iThanslate | iThanslate | iThanslate 


着 非 直观 的 手势 B ; 


We added some gestures We added some gestures We added some gestures 


Paste from clipboard 


Voice Input 


Text-To-Speech 
Patter, 


anti~ 


Thanks. Got it! Thanks. Got it! Thanks. Got it! 


设计 师 可 以 提供 简单 的 方式 让 用 户 选择 输入 模式 ， 就 像 Amazon 
Price Check 应 用 中 的 “扫描 、 拍 照 、 语 音 ”(Scan It, Snap It, Say 
It) 那样 。 实 际 上 ，iTranslate H3 P SETORS T, Google Translate, 
就 在 文字 输入 框 下 面 提供 了 “拍照 、 语 音 、 手 写 ”(Snap It, Say 
It, Write It) 的 上 下 文 工 具 栏 。 


AA 
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English e Spanish 
wut) 
ole 
(e % 
What's new 


* Clean and simple look-and-feel 

* Faster, simpler speech translation 

- Fullscreen camera and picture 
translation 


- More languages for handwriting and 
camera 

- Improved right-to-left language 
support 

— Takeatour 


在 接 下 来 的 例子 中 ， 我 们 可 以 看 到 ，Over 应 用 的 设计 师 实在 是 太 
EKRANE ST. AJUE REMA NAH. xiii 
理念 倒是 没什么 错 ， 但 不 应 以 它 这 种 方式 实现 。 转 盘 式 来 单 选 项 
把 主导 航 和 操作 结合 在 了 一 起 ， 而 且 其 选项 总 在 变化 。 这 和 古 我 所 
尝试 过 的 真正 令 人 不 安 的 照片 编辑 工具 ， 可 能 也 是 最 没有 效率 的 
一 个 


o 


NEED INSPIRATION? 


1 Kate Middleton Could 
Mi k kt M II 
E zio * Pca 
— 


| 


ADD TEXT 


ADD ARTWORK 


TAKE PHOTO ALBUMS 


eee — — MENGE 


TRE VASE A] A: CAEBEASBEXE— ei?” AURA 
“可 以 ”， 那 么 就 照 做 吧 ， 即 使 〈 或 者 可 能 尤其 ) 这 样 意味 着 牺牲 
创意 。 但 你 的 用 户 会 对 此 表示 很 喜欢 。 


图 11-13 
iOS 版 Amazon Price Check 和 安 
卓 版 Google Translate: 直观 的 输 
入 模式 选择 器 


图 11-14 
iOS 版 Over: 令 人 不 恰 快 的 导航 
创 新 (http://www.youtube.com/ 
watch?v=rMGOftTdSy4&feature= 
youtu.be ) 
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隐喻 错位 


造成 这 种 反 模 式 的 原因 古 在 寞 面 设计 上 选择 了 错误 的 隐喻 。 隐 喻 
错位 可 能 出 现在 低层 次 ， 比 如 没有 正确 使 用 一 个 控件 或 图 标 ， 也 
可 能 出 现在 高 层次 ， 比 如 应 用 的 概念 模型 与 用 户 的 心理 模型 不 符 。 


控件 错位 

Conqu 和 DailyBurn 就 是 低层 次 控件 错误 的 示例 。 出 于 未 知 的 原 
因 ， 这 两 个 应 用 的 设计 师 都 选择 创建 日 定义 控件 ， 而 不 古 使 用 安 蛙 
系统 的 默认 控件 。Conqu 使 用 了 一 个 iPad 弹出 控件 ， 而 DailyBurn 
则 使 用 了 iOS 风格 的 选择 器 。 


图 11-15 


安 卓 版 Conqu fü DailyBum: 在 
安 齐 应 用 中 使 用 了 出 人 意料 的 
iOS 风格 控件 


© finish prototyp 


create wireframes 


test 


a 


lll Delete cancel next > 


iOS FN nifi. Edmunds 的 主导 航 采 用 了 非 标准 控件 。 如 采用 户 不 
能 轻 多 看 出 应 用 的 主 模块 ， 那 么 这 就 会 影 啊 应 用 的 使 用 率 。 


Edmunds 应 用 的 首页 默认 几乎 是 空白 的 。 我 过 了 好 一 会 儿 才 意识 
到 那 古 一 个 搜索 表单 。 这 个 应 用 的 其 他 模块 也 很 容易 被 名 略 ， 因 
为 在 安 晶 版 应 用 中 它们 被 塞 在 了 下 拉 菜 单 控件 下 面 ， 在 iOS 版 中 
则 塞 在 了 一 个 第 头 下 面 。 


| 45 ze 


p 114 


图 11-16 
安 卓 版 Edmunds: 首页 ， 以 及 错 
误 地 使 用 下 拉 菜 单 作为 主导 航 


EGER NV E EME. SN LEGE M"E'N- EME E E- 


ecome] Vehicle Search come) Vehicle Search 


MAKE MODEL YEAR M Vehicle Search $ YEAR 


Advanced Search 


Dealer Search 


Calculators 
| n i | View History | 
a rx 
Acura | Acura 
Aston Martin Aston Martin 


Patter, 


Patter, 


图 11-17 
: | iOS 版 Edmunds: 空白 的 首页 确 
Vehicle Search Vehicle Search 


T 实 是 一 个 使 用 非 标准 菜单 的 搜索 


Vehicle Search 表 单 


3:40 PM 4 No Service 3 3:44 PM 


Advanced Search (Beta) 


Calculators 


Q 
Q 
P Dealer Search 
m 
i 


Settings & Location 


Aston Marti 
son My Search 


© Saved Cars 


© Recently Viewed 
Bentley 


Pattern 


Bugatti 


Buick 


一 个 简单 的 修正 方法 是 使 用 导航 选项 卡 进 行 切换 ( 见 第 1 章 )。 隐 
式 搜 索 模 式 也 很 适合 首页 的 车 型 搜索 ， 不 管 怎 样 ， 总 比 一 个 空白 
的 首页 强 。(Zillow 和 Trulia 的 隐 式 搜索 例子 参见 第 4 章 。) 
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11-18 
iOS 版 Kindle 把 亮度 控件 隐藏 在 
了 字体 设置 图 标 下 面 
[小 贴 士 ] 


下 拉 刷 新 可 能 不 久 就 会 消 
失 ， 因 为 现在 大 多 数 设 
备 的 配置 都 完全 可 以 处 
理 后 台 更 新 (信息 来 源 : 
http://www.theverge.com/ 
apps/2013/12/20/5231728/ 
is-it-time-to-kill-pull-to- 


refresh )。 


| aE 
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图 标 铺 位 

用 户 对 通用 图 标 有 特定 的 认识 齿轮 代表 设置 ， 星 星 代表 保存 或 
标明 收藏 ， 放 大 镜 意味 着 搜索 ， 等 等 。 把 熟悉 的 图 标 用 于 其 常用 
的 功能 之 外 就 会 导致 混乱 。 比 如 iOS 版 Kindle 应 用 ， 我 好 不 容易 
才 发 现 调节 亮度 的 控件 放 在 了 字体 设置 图 标 内 ， 真 让 人 庭 异 。 


No Service + 5:52 PM CT mm 


= Police: A Harry Hole... || 


pri UIL 


— acr conco 
director. Finally, the weapon 
was brought to Norway by 
Rudolf Asayev, alias Dubai, 
who, before he disappeared, 
had monopolised the 
narcotics market in Oslo with 
the heroin-like opioid violin. 
Oslo, the very town where the 
gun now found itself, in 

Holmenkollveien, to be 

2. in Rakel Fauke's 

)dessa had a 

could hold 

twenty rounds of Makarov. 

© Aa g o 


1% - Page 1 of 518 - Loc 71 of 8198 


手势 铺位 

“下 拉 刷 新 ”现在 已 经 是 一 个 非常 标准 的 手势 了 。 我 们 能 在 生产 力 
工具 、 社 交 和 娱乐 、 购 物 等 类 型 的 应 用 中 见 到 它 。Tweetbot 3 和 
Audible 是 下 拉 刷 新 设计 的 典型 示例 。 


邮件 应 用 Seed 试图 教会 我 们 一 种 新 的 招数 :下拉 添加 提醒 。 可 想 
而 知 ， 其 结 末 事与愿违 。 我 们 邦 知 道 下 拉 是 做 什么 用 的 ， 或 者 就 
当 我 们 知道 吧 ， 总 之 下 拉 不 十 用 来 给 邮件 添加 提醒 的 。 我 猜 有 人 
终于 想 明 白 了 ， 因 为 现在 最 新 版 的 Seed 已 经 改 用 一 个 人 们 熟悉 的 
间 钟 图 标 表示 提醒 了 。 


Searching... © 12:46 PM No Service 4 4:48 PM 


T , 
e J Mentions Cloud Device iTunes 
人 


Q Search Y All Titles 4+ Recent C Refresh 


` Release to Refresh 


2 Search Mentions EX li] | 


| , ZE 7HRS12MINS 
Jaye Brown Gjaye brown1 

@tori @theresaneil | believe it's 
"Shop like a Fox News 
Anchor". 


. Boston Jacky (Unabridged 
Rich Malley @Richie_boy By L.A. a) eed) 
@theresaneil Er, um, it's the Narrated by Katherine Kellgren 
new WTF pattern. MS ET 
Chad Huff Gctectetu The Eh Gr rer 
Gjaye brown1 @tori Narrated by George Guidall 
@theresaneil Ha! That must be SE MINS SY SECS LEFI 
it. The Fox News rating scale. "E 
Or "Real American" rating | Bomb (Unabridged) 
ad) By Steve Sheinkin 
legend. | M Narrated by Roy Roy Samuelson 


2398 The House of Hades (Unabridged) 
A 7 By Rick Riordan 
\ x " Narrated by Nick Chamian 
17 HRS 32! 


Welcome to Seed Skip 


You can add a reminder to any 
mail Cancel Add Reminder Save 


ue Dec 1 AM 


Today 5 58 PM 


lar 4 
Wel 19 


DIERE S fr 

讨论 这 类 反 模 二 时 ， 我 最 喜欢 用 的 一 个 例子 是 我 的 前 老板 要 求 我 
们 使 用 的 一 个 故障 申报 系统 。 每 当 出 现 一 个 技术 问题 ， 无 论 是 挟 
记 密 码 还 是 笔记 本 有 死机， 我 们 都 要 登录 这 个 系统 ， 训 贤 问 题 列 表 ， 
然后 选择 一 项 回 题 ， 把 它 添 加 到 购物 车 ， 然 后 结账 。 这 是 个 多 么 
好 的 电 商 应 用 设计 啊 ， 但 十 完 全 与 技术 文 持 应 用 不 搭 辽 | 


图 11-19 
iOS 版 Tweetbot 3 和 Audible: 下 
拉 刷 新 已 经 成 为 标准 手势 


图 11-20 

iOS 版 Seed 的 前 后 两 个 版 本 : 
左 图 为 下 拉 添 加 提醒 ， 右 图 为 改 
版 后 使 用 了 提醒 图 标 


反 模 式 | 299 


图 11-21 
心理 模型 错位 : 把 申请 技术 支持 
当成 了 疯狂 购物 


[小 贴 士 ] 

无 论 是 图 标 、 控 件 ， 还 有 是 
概念 模型 方面 的 隐喻 ， 都 
是 可 以 简化 和 提升 体验 的 
视觉 化 快捷 方式 。 但 是 使 
用 不 当 的 话 ， 会 让 用 户 感 
到 挫败 且 难 以 掌握 。 


图 11-22 
iPad 版 ABC News (2011 年 ) 使 
用 地 球 仪 作为 新 闻 内 容 的 导航 ; 
iOS 版 Geo Walk， 显 示 地 理 信 息 
的 合理 的 地 球 仪 设计 


入 和 
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| Help Desk W 


Add your problem(s) to the cart, then checkout: 


Tj Laptop won't boot 
| O Monitor is dead 

e Battery is dead 

O Forgot password 


“Add to Cart 


另 一 个 例子 是 ABC News iPad 应 用 在 2011 年 左右 的 版 本 。 一 个 
地 球 仪 样子 的 新 闻 内 容 导 航 ? 我 想 ， 如 果 新 闻 报 道 是 从 地 球 仪 上 
的 特定 地 理 位 置 显 示 出 来 ， 还 有 点 道理 ， 但 实际 上 完全 不 是 这 样 。 
ABC News 地 球 仪 与 我 们 赖 以 生存 的 地 球 毫 无 关系 。 它 只 是 一 个 难 
以 阅读 、 更 难 浏 览 的 不 停 旋 转 的 球 。 

对 比 来 看 看 Geo Walk 的 地 球 仪 。Geo Walk 是 一 个 探索 世界 各 地 真 
相 的 教育 类 应 用 ， 它 把 真相 卡片 放置 在 地 球 仪 上 的 不 同 地 点 ， 这 
样 你 就 能 探索 某 一 个 特定 区 域 的 真相 。 


思春 的 对 话 框 

在 《软件 观念 革命 : 交互 设计 精髓 》 (About Face 3: The Essentials 
of Interaction Design, 2007 年 Wiley 出 版 社 出 khk, http://amzn. 
to/IfFC7SK) 一 书 中 ， 作 者 Alan Cooper 写 道 :“ 在 使 用 协调 的 工 
具 进 行 工 作 时 ， 一 个 人 才能 进入 高 效 的 心理 状态 。 平 白 无 故 打 断 


HL BS ERT EGE MAE ERE TAT A” 


Bill Scott 也 对 “非常 思春 的 干扰 行为 ”这 一 观点 表示 赞同 ， 并 且 
把 这 种 行为 命名 为 “愚蠢 的 对 话 框 ” 反 模式 .。 


我 认为 我 遇 到 过 的 “ 轴 春 的 对 话 框 ” 中 最 差劲 的 体验 来 目 这 样 一 
种 应 用 : 第 一 次 使 用 时 就 让 你 给 应 用 评分 ， 然 后 让 你 开局 基于 地 
理 位 置 的 服务 ， 然 后 让 你 同意 给 你 推送 销 上 县 ， 人 然后 又 一 次 让 你 给 
应 用 评分 。 连 续 四 次 强制 弹出 对 话 框 让 我 确实 想 给 这 个 应 用 打分 
了 一 一 一 个 又 大 又 圆 的 零 重 ! 


图 11-23 
Rate This Ap Rate This App 愚蠢 的 对 话 框 : 初次 使 用 就 弹出 
Rate It Now Enable Loca Rate It Now 多 个 对 话 框 ， 在 正式 开始 前 就 扰 
Remind Me La Services| Allow Push Notific Remind Me Later 乱 了 用 户 流 
kcfhadel rom Don't Allow No, Thanks 
那些 第 一 次 使 用 就 弹出 对 话 框 让 你 注册 的 应 用 更 计 人 厌 。 关 于 这 种 
烦人 的 设计 以 及 为 什么 这 种 设计 没有 必要 ， 可 以 参看 后 面 由 Greg 
Nudelman 撰写 的 “番外 篇 ”。 
Jamie Oliver's Recipes 应 用 也 是 一 个 思春 的 对 话 框 例 和子 。 在 我 点 击 
“添加 到 购物 清单 ”时 ， 应 用 弹出 一 个 对 话 框 ;:“ 你 想 把 所 有 这 些 食 
材 添加 到 你 的 购物 清单 吗 ? ”可 不 是 么 ， 要 不 然 我 为 什么 会 点 那个 
按钮 呢 ? | 
图 11-24 


iOS 版 Jamie Olivers Recipes: 
对 每 项 操作 都 进行 确认 完全 没有 
必要 

Add to shopping list 


Do you want to add the ingredients Delete All 
for ‘Thai green curry with coconut Do you want to delete all the items in 


rice’ for two people to your shopping your shopping list? 
list? 


Cancel Delete 
Cancel Add 


反 模 式 | 301 


图 11-25 
iOS 版 Chipotle 和 Zulily: & # 
的 对 话 框 淋漓 尽 致 地 发 挥 了 作 
用 ,干扰 了 用 户 操 作 流 


[小 贴 士 ] 

不 要 扰乱 用 户 的 操作 流 。 
只 在 用 户 执行 不 可 撤销 的 
操作 (比如 永久 删除 )， 需 
要 用 户 确认 时 才 显 示 对 话 
框 。 如 果 非 要 提示 用 户 给 
你 的 应 用 评分 ， 至 少 要 等 
到 用 户 有 幸 用 上 应 用 之 后 
再 说 。 
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第 二 张 图 示 的 “删除 确认 ”对 话 框 没有 什么 问题 。 在 执行 一 个 不 
可 撤销 的 操作 前 要 求 用 户 确 认 是 正确 的 设计 ， 比 如 删除 一 个 列表 
中 的 全 部 项 ， 或 是 永久 清空 回收 站 。 但 没有 必要 对 用 户 的 每 个 操 
作 都 要 求 做 出 明确 的 确认 。 比 如 ， 对 于 添加 到 列表 这 个 操作 ， 使 
用 瞬时 反馈 提醒 用 户 该 项 已 被 添加 就 可 以 了 。( 参 见 第 9 章 。) 


Chipotle 是 又 一 个 思春 的 对 话 框 例子 : 在 我 准备 结账 的 时 候 弹 出 
了 一 个 注册 /登录 对 话 框 。 为 什么 不 直接 转 到 登录 页 面 呢 ? Zulily 
应 用 想象 不 到 我 有 多 想 退 出 登录 ， 所 以 确认 了 两 次 才 人 允许 我 退出 。 
(RE Tr! 


3:28 PM 


Your Bag (1) 


check out 
加 Your Chipotle online account works 


or You must be logged in to 
A 
5 

on the iPhone and vice versa. 


Register Sign In 


Sign Out 
Are you sure you want to sign out? 


1x Bottled Water 
cancel 


sign out 


1x Chicken Salad 


ant~ 


FE 


Patter, lated on checkout 


oubtotal:.... 


Clear 


许多 购物 应 用 都 使 用 思春 的 对 话 框 ， 给 予 商 品 已 添加 到 购物 车 的 
反馈， 比如 Haute 和 Rent the Runway。 一 种 干扰 较 小 的 、 更 有 效 
的 方式 是 只 增加 标识 购物 车 里 商品 数量 的 数字 即 可 。 你 也 可 以 显 
示 一 条 行内 确认 信息 ， 或 是 一 个 添加 商品 到 购物 车 的 动画 。 人 参见 
第 9 章 的 相应 示例 。 


图 11-26 
iOS Jk Haute 和 Rent the 
Runway: 在 添加 商品 到 购物 车 
时 弹出 愚蠢 的 对 话 框 
The item was added to your cart! Added to bag! 
Continue View Cart 
图 表 垃 专 
Edward Tufte 在 他 1983 年 的 著作 《定量 信息 的 视觉 展示 》(The 
Visual Display of Quantitative Information, Graphics Press Ehk) +, 
UET "Hb — inl, FRNA P AKER AZ. 
=e TUG H PTT! E 11-27 
nne dm. WTFViz 博客 上 的 图 表 垃 圾 ， 
根据 维基 百科 的 定义 ， 图 表 垃 圾 是 “那些 不 必 呈 现在 图 形 上 的 信 
息 ， 或 是 那些 干扰 读者 麟 览 信 息 的 所 有 图 表 和 图 形 上 的 视 完 元 巡 。 
(1; WTFViz 是 Tumblr 上 的 一 个 博客 ， 专 门 收 集 毫 无 意义 的 可 视 化 图 表 。 
( 译 者 注 ) 
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图 11-28 
hh Analytics 3D: 图 表 垃 圾 的 
典型 例子 ， 包 含 一 个 饼 图 / 虫 泣 
以 及 一 个 长 满 了 刺 的 地 球 


Analytics 3D 是 图 表 垃 圾 的 典型 例子 。 这 些 图 表 上 的 视觉 元 素 实 
在 太 让 人 分 神 ， 其 至 连 想 看 清 图 表 上 的 数据 都 不 可 能 。 但 是 ， 咖 ， 
它 可 是 3D 的 啊 ! 


Carrier 全 4:41 PM } Carrier = 4:58 PM 


Example Website OS Example... Locat... 


再 来 看 看 OOKLA Speedtest 应 用 中 反 模 式 的 例子 ， 这 个 办 办 发 光 
的 七 彩 计量 如 以 及 流沙 效果 的 蓝 色 背景 都 让 人 不 能 专心 于 阅读 数 
据 。 查 看 Cashish 的 图 表 更 是 一 大 挑战 ， 它 那 色 彩 缤纷 的 图 表 如 彩 
虹 般 身 在 一 张 美 钞 之 上 。 

其 至 像 网 格 线 这 种 看 似 无 害 的 设计 元 素 也 可 能 是 图 表 垃 圾 。 在 两 
个 健康 类 应 用 Glucose Buddy 和 Heart Pal 中 ， 粗 壮 的 水 平和 垂直 网 
格 线 实际 上 让 数据 更 难看 清 。 


» 11:43 AM 


eeeee Verizon 


OOKLA SPEEDTEST 


了 =! 


Reporting 


Export Transactions 


Spending During Last 60 Days 


7o 


BLunch ilaGasoline 


| Breakfast 


| Dinner 


= High: 


4/19 4/20 4/21 4/22 4/23 4/24 4/25 


Graph Capture Options 


Low: 


4/26 


Systolic/Diastolic 
systolic diastolic 


normal range 


144.0/93.0 


156.0/99.0 138.0/88.0 


4/27 4/28 Chart 
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Z Æ hA OOKLA Speedtest 和 iOS 
版 Cashish: 全 是 图 表 垃 圾 


iOS 版 Glucose Buddy 和 Heart 
Pal: 网 格 线 让 人 无 法 专注 于 数据 


下 面 两 个 例子 用 来 说 明 页 面 上 堆积 的 信息 太 多 。 在 移动 应 用 上 表 
现 饼 图 很 困难 。 由 于 屏幕 空间 有 限 ， 很 难 既 显 示 图 表 又 显示 图 释 。 
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图 11-31 
Windows Phone 版 Phonealytics s Dashboard 
和 iOS 图 表 设 计 概念 : HAMS ant; 
动 UL 设计 是 个 挑战 


-lll EXPENSER 3G 12:00 


EP attern 


sources 
9% 
referral - 2383 = 
(none) - 1970 
organic- 1683 6% Chocolate 
feed - 5 
(not set) - 1 


9% Savings 
56% Personal 


May 


19% Groceries 


Phonealytics - full 


© © 


Ww 


然而 Roambi 的 设计 束 兼 顾 了 创新 和 可 用 性 。 你 可 以 旋转 图 表 ， 且 


[小 贴 士 ] 有 一 个 固定 的 指针 显示 所 指 遍 区 的 详情 。 


在 图 表 和 图 形 中 ， 只 使 用 
绝对 必要 的 视觉 元 素 传 达 

信息 。 关 于 图 表 设 计 的 最 
佳 实践 可 参见 第 6 章 。 


Sample - Payer Mix Sample - Payer Mix 


Charges - Prior Charges - Prior 


Self Pay Commercial 
$2,465,258.87 $2,393,351.23 
iOS 版 Roambi: 适用 于 移动 设 22 e 


备 的 饼 图 设计 (http://youtu.be/ 


' T T à [T imm 
WMmMKkGF64XY ) 4 ð WM e JI ð ODO © 


按钮 海 
2002 年 ， 在 进行 Sabre 航空 解决 方案 (Sabre Airline Solutions) 的 
可 用 性 审查 时 ， 我 和 Bill Scott 首次 命名 了 按钮 海 这 种 反 模 式 。 我 


入 和 
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们 让 我 们 的 团队 评测 了 儿 十 个 网 页 问 和 加 面 端 应 用 ， 以 找 出 最 需 
要 重新 设计 的 应 用 。 其 中 许多 应 用 的 界面 都 使 用 了 Java Swing 或 
Visual Basic 设计 ， 并 且 在 界面 的 右 侧 或 底部 都 有 一 个 按钮 栏 。 在 
底部 一 行 放 不 下 那么 多 按钮 的 时 候 ， 就 会 显示 两 行 按 钮 。 所 有 按 
钮 的 大 小 、 颜 色 、 视 觉 轻 重 都 一 样 ， 如 果 不 看 完 所 有 按钮 上 面 的 
字 ， 你 根本 不 知道 该 点 击 哪 一 个 。 


图 11-33 
Visual Basic 和 Java 编写 的 桌面 
应 用 : 被 按钮 海 淹没 


这 种 反 模 式 中 我 最 喜欢 用 的 一 个 例子 是 Visual KPI。 自 本 书 第 1 版 
出 版 以 来 ， 这 个 应 用 又 成 功 添加 了 更 多 的 控件 和 按钮 ! 实际 上 ， 
增加 了 有 一 倍 那 么 多 。 通 常 我 会 快速 画 出 一 个 重新 设计 的 草图 ， 
但 这 个 应 用 需要 从 信息 架构 层 开 始 彻 底 重 新 设计 。 


12:30 PM 70m 图 11-34 
| hans porg iOS 版 Visual KPI: 左 图 为 2010 
a 年 到 2011 年 左右 的 版 本 ， 右 图 
为 2013 年 左右 的 版 本 一 一 现在 
All Views oe 2 | 
Region-NE 


Region-SE 
Region NE 


Pattern 


anti~ 


Excel 


Multi Pen Today vs yesterday Map Example 


Multi Scale Trends on different scales 
图 LL OL BlGood BH 图 HH Bunk ANis ON/A 


w © 


另 一 个 例子 是 Redfin。 这 个 应 用 的 页 面 上 有 太 多 按钮 (还 有 一 些 看 
上 去 很 像 按钮 的 元 素 )， 以 致 你 很 难 专注 于 其 中 的 内 容 (房屋 图 片 
及 描述 )。Zillow 的 地 产 页 面 就 要 干净 得 多 ， 工 具 栏 上 显示 主要 操 
作 ， 次 要 操作 放 进 “更 多 ”选项 中 。 
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图 11-35 
安 卓 版 Redfin fv iOS 版 Zillow: 
按钮 海 与 带 有 工具 栏 的 干净 设计 


图 11-36 
安 卓 版 CarMax: 四 角 按 钮 设计 
效果 不 佳 ; 右 图 为 我 的 低 保 真 重 
新 设计 版 本 ,使 用 了 安 卓 操作 栏 


[小 贴 士 ] 

使 用 系统 自 带 的 控件 来 实 
现 页 面 层级 的 操作 。 这 样 
做 的 好 处 是 ， 直 到 出 现 需 
要 用 到 按钮 的 情景 之 前 ， 
它们 都 不 会 碍 眼 。 关 于 按 
钮 的 最 佳 实践 参看 第 5 Fo 
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Austin, TX 78751 
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@ For Sale 


$465,000 


3 bd 3 ba Built in 1953 
Single Family 7,100 saft lot 
AD M erection ios 1,558 sqft 69 days on Zillow 
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narrow & deep). > ily fee-simple ownership, 

not duplex or conde: Main house w detached garage/ 

studio w alley access. Traditional front porch w small 1 i 

front yard & courtyard spaces off kitchen & rear. Main Description 

Residence-1,696sf 3/2.5 w separate living and family Get more info Save More... 


rooms. Detached Garaae/Studio-267sf studio w 


CarMax FEA TRHA, (Le EM “WARR” Pree A 
AE. KEE mM Te PIE, RRB SII A 
那样 。“ 保 存 ” 和 和 “分享” 应 该 显示 出 来 ， 而 “致电 ”和 “发 送 电 
FARE” VOTE "T 菜单 进入 。 


< CM Car Details 


kx <i: 
Sur Baghla 2009 MINI Cooper John Cooper Works 


$19,599* 57K miles 


2009 MINI Cooper John Cooper Works 
$19,599* 
1 of 7 


Located At 
4400 IH 35 Austin, TX 


Car Details 

2007 Limited Edition 2 door Mini Cooper Sidewalk 
Convertible 

Great condition inside and out with only 57K miles. 
Clean Title. Clean Carfax History Report in hand. 


Plenty of upgraded features. The perfect car for Austin! 


-Automatic CVT transmission 
-4-Cyl 1.6 liter engine 


Plume 在 一 条 推 文 被 点 击 时 使 用 了 情景 工具 模式 来 显示 选项 。 但 
是 ， 用 点 击 的 方式 显示 工具 而 不 是 显示 完整 的 会 话 系 列 ， 会 产生 


一 个 交互 设计 问题 。 用 户 怎 样 才能 查看 完整 的 会 话 呢 ? 要 是 我 的 
WL AY SS ES Plume 设计 的 那样 又 增加 一 行 “查看 完整 会 
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Rosenfeld Media 
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e. Bill Scott 
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X > MEET THE EXTREMELY NEW 


W Plume 


HATCH pitch 


steven hoober 


Lax Gani 


iOS 版 本 的 设计 中 解决 了 这 个 问题 。 


击 显 示 情 景 工具 的 模式 ， 但 古 可 以 疝 左 背 动 打开 消 因 详情 。 
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Anchor". 
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Detail Ù 


图 11-37 
安 卓 版 Plume: 


图 11-38 
Tweetbot: 


= 4 3t 3f, 
但 两 行 按钮 就 太 多 了 


点 击 消息 显示 上 下 文 


TH; 向 左 滑动 查看 消息 详情 
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图 11-39 


Z Æ IK Behr Paint: 42 iOS 版 的 
设计 原封 不 动 地 搬 到 了 安 卓 平台 


310 
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格格 不 入 


格格 不 入 鸭 反 模式 通 背 是 在 执行 层面 做 出 无 知 决 定 的 结果 ， 或 是 
匆忙 投入 市 场 的 结果 ， 或 是 两 者 兼 而 有 之 。 这 种 模式 是 指 ， 采 用 
了 一 个 为 单一 平台 所 做 的 设计 ， 又 将 其 套用 到 另 一 个 平台 当中 。 

许多 公司 不 做 任何 修改 就 把 iOS 平台 设计 直接 搬 到 安里 平台 上 去 ， 
Behr Paint 正 是 其 中 之 一 。 不 仅 界 面 看 上 去 搞笑 〈 图 形 的 分 辩 率 错 
了 )， 而 且 还 打破 了 安里 设计 规范 《在 http://developer.android.com/ 
design/patterns/pure-android.html 上 和 碍 看 安里 特定 的 设计 规范 列表 )。 


a 9 m Um A w 4 oo Q uF. HT: Gf | Mv E A oo 
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Gap MHIE Hoh lin Psd, Awe EME NH T 
(http://docs.webplatform.org/wiki/concepts/internet_and_web/html5_ 
hybrid_applications)。 但 用 户 可 不 是 傻子 ， 看 看 用 户 的 评价 吧 
(https://play.google.com/store/apps/details?id=com.skava.hybridapp. 
gap). 

我 认为 SmartyPig 也 做 出 了 同样 的 事情 。 你 能 看 到 这 个 应 用 的 首页 
就 是 一 个 登录 页 面 ， 明 显 没 有 和 针对 我 使 用 的 Nexus 5 做 过 适 配 。 我 
猜 这 个 应 用 的 使 用 率 相 当 低 。 


GAP a ( Back [AP Em] 
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Thank you for downloading! 
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他 Zxicivbinm a 
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TC EA P JL rs, YESS ACE FRIN: 


。 通读 并 理解 目标 操作 系统 的 设计 指责。 

。 每 天 使 用 你 为 之 设计 /开发 的 移动 设备 ， 直 到 你 对 那个 平台 的 
细 廊 全 部 了 如 指向 为 止 。 

。 为 每 个 平台 分 别 设计 不 同 的 UL, SP EMA TALE. 


还 有 有， 小心 那些 向 你 承诺 “一 次 编程 ， 全 平台 发 布 ” 的 服务 。 如 
果 你 要 使 用 其 中 一 个 这 样 的 服务 ， 就 选择 那个 能 让 你 为 每 个 系统 
创建 自 定 义 用 户 界 面 的 平台 ， 比 如 Xamarin (https://xamarin.com/ ) 


图 11-40 
安 卓 版 和 iog 版 Gap: 套 了 个 壳 
的 移动 网 站 


图 11-41 
安 音 版 SmartyPig 


[小 贴 士 ] 

每 个 平台 之 间 者 有 明显 的 
区 别 : 一 个 绝妙 的 OS 设 
计 可 能 会 是 安 卓 平台 上 的 
差劲 设计 ， 反之 亦 然 。 通 
过 设计 和 测试 ， 为 每 个 平 
台 打 造 超凡 的 体验 。 
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或 PhoneGap (http://phonegap.com/) 。 


ties: 避免 移动 应 用 中 的 注册 /登录 反 模 式 
作者 : Greg Nudelman, Design Caffeine 公司 创始 人 
反 模 式 这 一 术语 出 自 TamaraAdlin 


摘 自 《Android % JA UI i& H 4% A ) ( Android Design Patterns: 
Interaction Design Solutions for Developers, 2013 年 Wiley 公司 出 
wk, tH Boxesandarrows 再 版 ) 


在 客户 下 载 了 你 的 应 用 之 后 ， 任 何 让 他 们 放 慢 速度 或 妨碍 到 他 们 
的 设计 都 是 不 好 的 设计 。 这 其 中 就 包括 ， 在 注 在 客户 还 没 能 认 清 
这 个 应 用 是 否 真 值得 使 用 前 ， 就 出 现 的 登录 /注册 表单 。 


长 注册 页 面 与 重要 的 移动 用 例 背 道 而 驰 ， 这 个 用 例 是 : 随时 随地 
快速 简单 的 信息 访问 。 随 着 公司 开始 想 明 白 以 下 这 个 简单 的 用 户 
体验 等 式 ， 这 一 反 模 式 变 得 越 来 越 少 。 这 个 等 式 即 

用 户 使 用 应 用 前 出 现 长 注册 表单 = 用 户 删 除 应 用 
然而 ， 还 是 有 很 多 应 用 在 被 使 用 前 就 强迫 客户 注册 、 登 录 ， 或 执 
行 一 些 其 他 设 用 的 操作 。 
比如 SitOrSquat 应 用 ， 它 是 一 个 非常 出 色 的 小 社交 工程 软件 ， 可 以 
让 人 们 在 想 上 厕所 的 时 候 在 街 上 找到 公共 而 所 。 


注 1: 中 文 版 已 由 人 民 邮 电 出 版 社 出 版 。( 编 者 注 ) 


但 是 收购 了 这 个 应 用 的 宝洁 公司 (Procter & Gamble) 似乎 完全 
没有 感觉 到 这 种 紧急 情况 的 存在 。 宝 洁 的 高 省 们 不 满足 于 俐 单 的 
“Squeezing the Charmin”“， 出 于 一 些 莫名 的 原因 ， 决 定 以 多 种 方 
式 强 迫 人 们 注册 应 用 。 

除了 注册 模块 之 外 的 整个 应 用 基本 由 4 个 页 面 组 成 (如 果 把 添加 
厕所 的 功能 也 算 上 的 话 ! )。 然 而 ， 如 有 果 你 把 全 部 反 模式 的 注册 页 
面 也 包括 在 内 , “预备 ”阶段 的 垃圾 就 用 了 7 个 页 面 ， 在 这 之 后 你 
才能 最 终 看 到 你 想 要 的 内 容 。 如 果 计 算 输入 生日 所 必须 作出 的 点 
击 次 数 ， 这 一 数字 竟然 达到 50 次 之 多 | 


mo fe " - [nmns n nnn é asn] 
Enjoy the go 
while you are 
Terms and Conditions onthe go! 


Stuff you should know before you go! 


FEAR TE Je d RE ve PET — SER EID, Ae: 如 采 这 是 个 网 
页 应 用 的 话 ， 你 会 强迫 客户 这 么 做 吗 ? 在 互联 网 连接 可 用 时 ， 你 
可 以 保存 客户 的 任何 行为 ， 并 利用 一 个 简单 的 会 话 令 牌 (session 
token) 和 客人 账号 反 向 连接 到 他 的 设备 。 即 使 他 不 在 线 ， 如 分 的 
智能 手机 也 拥有 足够 大 的 机 载 存 储 ， 在 移动 网 络 可 用 后 可 以 用 来 
与 你 的 服务 贷 进 行 同 步 。 


这 意味 着 根本 没有 理由 强迫 任何 人 注册 任何 东西 ， 除 非 他 想 要 从 目 
己 的 手机 里 与 其 他 设备 分 有 享 数据 。 作 为 一 条 普 过 适用 的 原则 ， 克 许 
客户 在 其 手机 本 地 保存 一 小 部 分 信息 而 不 用 登录 ， 要 比 在 下 载 后 第 
一 次 使 用 时 就 强迫 用 户 和 注册 好 得 多 。 等 到 客户 想 要 做 某 些 事 的 时 候 ， 
比如 与 其 他 设备 分 有 享 信息 ， 或 访问 已 保存 在 他 的 账 志 内 的 信息 ， 再 
要 求 他 完成 注册 就 完全 合乎 情理 。 但 即便 如 此 ， 也 应 该 只 要 求 用 户 
填写 下 一 步 处 理 确实 需要 的 信息 ， 不 应 索要 与 之 无 关 的 信息 。 


ik 2: Charmin 为 宝洁 收购 的 卫生 纸 品 牌 ，“Squeezing the Charmin” 是 其 早期 一 
则 广告 中 的 广告 词 。( 译 者 注 ) 


图 11-42 
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